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

Репост с форумов HotS

Всем привет!

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

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

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

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

Курсив ctrl+I

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

Зачеркнутый

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

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

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

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

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

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

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

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

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

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

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

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

Нажмите <kbd>Alt</kbd> + <kbd>R</kbd> для включения информации о FPS. ⇒ Нажмите Alt + R для включения информации о 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, строка таблицы. Например, возьмём какую-нибудь информацию из Зала славы Орды Ульдира
<table>
<th>Ранг</th>
<th>Гильдия</th>
<th>Игровой мир</th>
<th>Регион</th>
<th>Выполнено</th>
<tr>
<td>1</td>
<td>Method</td>
<td>Tarren Mill</td>
<td>Европа</td>
<td>19.09.2018 21:25 MSK</td>
<tr>
<td>2</td>
<td>Limit</td>
<td>Illidan</td>
<td>С. и Ю. Америка, Австралия и Океания</td>
<td>20.09.2018 3:19 MSK</td>
<tr>
<td>3</td>
<td>Экзорсус</td>
<td>Ревущий фьорд</td>
<td>Европа</td>
<td>21.09.2018 14:52 MSK</td>
<tr>
</table>



























Ранг Гильдия Игровой мир Регион Выполнено
1 Method Tarren Mill Европа 19.09.2018 21:25 MSK
2 Limit Illidan С. и Ю. Америка, Австралия и Океания 20.09.2018 3:19 MSK
3 Экзорсус Ревущий фьорд Европа 21.09.2018 14:52 MSK

Ненумерованный список 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/Nh4SJte.jpg" alt="Что-то горит, вроде?" width="452" height="432" />

Что-то горит, вроде?

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

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

<a href="https://worldofwarcraft.com/ru-ru/"><img src="https://i.imgur.com/cvmNHRz.png"></a>

Видео

Видео

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

https://www.youtube.com/watch?v=qjEjHuOU3tw

https://vimeo.com/4116495

This guide was inspired with original Pachimari’s post.

25 лайков

Это все, конечно, хорошо. Новые возможности и т.п. Но стоит ли оно такого количества на игровом форуме? Пестроты и навороченности через чур много, а тут еще ощущение, что ты на форуме в word и excel можешь поработать)

Почему нет? Это готовый движок, называется Discourse.

Лайков: 1

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

4 лайка