💎 Памятка по HTML\Makrdown разметке на новом форуме

Всем привет!

Наш с вами новый форум имеет много возможностей, и не все они выведены в редактор. Ниже я постараюсь описать основные.

Форматирование текста

Полужирный ctrl+B

<b>Пишем полужирным!</b>Пишем полужирным!

Курсив ctrl+I

<i>Пишем курсивом!</i>Пишем курсивом!

Зачеркнутый

<s>Ехидно пишем зачеркнутым</s>Ехидно пишем зачеркнутым

Аббревиатуры

Для просмотра значения аббревиатуры нужно навести мышку.

<abbr title="Креатив годный, автор молодец">КГ\АМ</abbr>КГ\АМ

Добавленный блок текста

Специальный тег для того, чтобы указать, какой фрагмент текста был добавлен.

<ins>Я пишу зелёненьким!</ins>Я пишу зелёненьким!

Удалённый блок текста

Аналогично тегу выше, этот указывает на то, какой фрагмент был удалён.

<del>Я пишу красненьким!</del>Я пишу красненьким!

Текст-клавиша

Позволяет выделить букву или сразу фразу так, что это становится похоже на кнопку.

Нажмите <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd> для включения информации о FPS. ⇒ Нажмите Control + Alt + F для включения информации о FPS.

Цитата Control+Shift+9

<blockquote>Цитируемый текст, ничего нового</blockquote>

Цитируемый текст, ничего нового

Отформатированный текстControl+Shift+C

<code>А сюда можно вставить ссылку</code>А сюда можно вставить ссылку

Надстрочный текст

Можно писать всякие формулы, вроде:

B<sup>2</sup>-4AC⇒ B2-4AC

Подстрочный текст

И не только математические!

C<sub>2</sub>H<sub>5</sub>OH ⇒ C2H5OH

Размеры текста

Большой текст

<big>Здоровенный текст</big>Здоровенный текст

Маленький текст

<small>Малюсенький текстуля</small>Малюсенький текстуля

Заголовок 1

<h1>Заголовок</h1>

Заголовок

Заголовок 2

<h2>Заголовок</h2>

Заголовок

Заголовок 3

<h3>Заголовок</h3>

Заголовок

Заголовок 4

<h4>Заголовок</h4>

Заголовок

Заголовок 5

<h5>Заголовок</h5>

Заголовок

Заголовок 6

<h6>Заголовок</h6>

Заголовок
Таблицы и списки

Таблицы

Таблицы, как и списки состоят из нескольких тегов. В начале нужно задать таблицу при помощи тега "table" и затем оперировать "th" table header, названия колонк, "td" table data, содержимое и "tr" table row, строка таблицы. Например, возьмём какую-нибудь информацию с Hots Logs
<table>
<th>Герой</th>
<th>Количество игр</th>
<th>количество банов</th>
<tr>
<td>Керриган</td>
<td>5 330</td>
<td>10 288</td>
<tr>
<td>Тиранда</td>
<td>5 354</td>
<td>1 625</td>
<tr>
<td>Азмодан</td>
<td>4 540</td>
<td>16 443</td>
<tr>
</table>

Герой Количество игр количество банов
Керриган 5 330 10 288
Тиранда 5 354 1 625
Азмодан 4 540 16 443

Ненумерованный список Control+Shift+8

Аналогично состоит из общего тега "ul" - unordered list (ненумерованный список) и отдельных на каждый элементов тегов "li" - list item (элемент списка)

<ul>
<li>Золото</li>
<li>Серебро</li>
<li>Бронза</li>
</ul>

  • Золото
  • Серебро
  • Бронза

Нумерованный список Control+Shift+7

Здесь открывающий тег уже "ol" - ordered list (нумерованый список) и продолжается с "li" на каждый элемент. Здесь допустимо задать параметр, с которого начнётся отсчёт - start.

<ol start="5">
<li>Золото</li>
<li>Серебро</li>
<li>Бронза</li>
</ol>

  1. Золото
  2. Серебро
  3. Бронза
Прочее

Перевод строки

Срочный перевод<br>строки! ⇨ Срочный перевод
строки!

Спойлер

Два тега вместе, общий details и "заголовок" summary:

<details><summary>В войне бесконечности умрёт...</summary><img src="https://i.imgur.com/ryEW9Dz.gif"></img></details>

В войне бесконечности умрёт…

Горизонтальная линия

Красивая линия. Идеально для подписи!

<hr>


Описание

Немного сдвигает текст так, что можно делать красивые описания.

<b>Гендзи</b>
<dd>Киборг Гэндзи Шимада смирился со своим механическим телом, которое раньше вызывало у него лишь отвращение, тем самым открыв новую лучшую сторону своего характера.</dd>

Гендзи

Киборг Гэндзи Шимада смирился со своим механическим телом, которое раньше вызывало у него лишь отвращение, тем самым открыв новую лучшую сторону своего характера.

У большинства участников форума есть права на использование всех тегов выше. Ниже содержатся теги доступные тем, у кого высокий уровень доверия. Подробнее об уровнях доверия можно прочесть здесь.

Ссылки и картинки

Ссылки

<a href="https://eu.forums.blizzard.com/ru/heroes/">Форум игры</a>Форум игры

Картинки

Старый-добрый тег img, который позволяет использовать такие параметры как:
  • src - собственно, ссылка на картинку
  • alt - текст который будет отображаться вместо картинки если она, например, удалена (необязательный);
  • width - ширина (необязательный);
  • height - высота (необязательный);

Допустимые форматы .jpg, .jpeg, .png, .gif и мой любимый .bmp

<img src="https://i.imgur.com/LSumH4h.png" alt="Как дела, Иллидан?" width="452" height="432" />

Как дела, Иллидан?

Картинка со ссылкой

Комбинация тегов для ссылки и картинки даёт ожидаемый результат

<a href="https://heroesofthestorm.com/"><img src="https://eu.forums.blizzard.com/ru/heroes/plugins/discourse-blizzard-themes/images/logos/heroes/game-logo-heroes.png"></a>

Видео

Видео

Форум понимает ссылки на Youtube и Vimeo, так что достаточно просто оставить такую ссылку в сообщении и он автоматически встроит ролик.

https://www.youtube.com/watch?v=mtReG9Z-BWI

https://vimeo.com/214708760

This guide was inspired with original Pachimari’s post.


Rinoa
Лайков: 12

Привет, спасибо за статью!

У меня пара вопросов:

  1. обязательно ли загружать картинки с imgur или можно воспользоваться тем же ImgBB?
    2)Нужно ли замазывать ники других игроков, если заливаешь скриншот со статистикой после матча?
Лайков: 1

Привет!
Вовсе нет, картинку можно загрузить на любой удобный ресурс. Более того, на самом деле форум довольно не глуп и сам распарсит ссылку, даже если она не оканчивается поддерживаемым расширением. Можно не заморачиваться с форматированием насчет картинок.
По никам, увы, сориентировать не могу. Зависит от контекста, я думаю.


Rinoa
Лайков: 1

Ясно, спасибо за ответ.

Лайков: 1

Ники нельзя называть когда идут обвинения. Это было всегда во имя избежания клеветания людей, когда могут испортить репутацию, а остальные подхватят и заклеймят человека.

Лайков: 1

не могу прикрепить ссылки на фото к сообщениям или теме, в чем может быть проблема? Использовал все варианты и через шаблон кода в примере. Пишет ошибка “вы не можете прикреплять ссылки\медиа файлы к своим сообщениям”

Лайков: 1

Недостаточно высокий уровень репутации.