В справочных материалах VK Видео Live указаны только базовые примеры использования разметки Markdown для оформления информационных блоков:
Однако, поддерживаемых способов сверстать текст куда больше. В том числе поддерживается и HTML-разметка. В данной статье я наглядно покажу все найденные мной варианты для Markdown (и пару HTML-тэгов в качестве исключения).
Стоит отметить, что GoodGame, Kick и Twitch также поддерживают Markdown в оформлении панелей с описанием. Но везде есть свои небольшие отличия: какие-то тэги не отображаются, какие-то оформляются по-своему.
Заголовки оформляются с помощью решеток #. Кол-во решеток определяет уровень заголовка. Поддерживаются до 6-го уровня, при этом разницы между первым и вторым уровнем, похоже, что нет.
Альтернативный способ разметить заголовки 1-го и 2-го уровня: использовать знаки – и =под текстом:
Заголовок 1 - Заголовок 2 =
Разделители —
Заголовок ---
--- Разделитель
---
Разбить текст можно горизонтальной линией с помощью символов — . Важно отделять текст пустой строкой от метки разделителя, иначе текст будет размечен как заголовок!
Форматирование текста
*Курсив* или _Курсив_ **Жирный** ***Жирный курсив***
HTML: <u>Подчеркивание</u> <s>Перечеркивание</s>
Для выделения текста используются спецсимволы *, _ , которые ставятся слитно к выделяемому тексту в его начале и конце. Знак ~ для перечеркивания здесь не поддерживается. Но допустимо использовать HTML-тэги: чтобы подчеркнуть или перечеркнуть <u></u> и <s></s> соответственно.
С помощью ` можно выделить область кода. Но в данном случае это больше относится к форматированию текста (сделать его “моноширинным” как в Telegram), так как подкрасить цвет за счет указания синтаксиса языка нельзя:
Одинарная тильда для отдельного `слова` или `целой строчки/фразы`
``` Для абзацев текста используется ```. Синтаксис "подкрасить" не получится. ```
```java const vk = "string" console.log(vk) ```
Ссылки
[Вебсайт](https://mikulski.rocks)
[Вебсайт](https://mikulski.rocks "Сюда можно добавить подсказку")
На [вебсайте][web] есть [блог][blog] с полезными статьями.
Несколько способов добавить ссылки. Самый распространенный и удобный: это [Текст](Ссылка) , при этом если после ссылки добавить текст в кавычках [Текст](Ссылка “Подсказка”), то при наведении курсора на ссылку – отобразится этот дополнительный текст (подсказка).
Альтернативный способ – это использовать “ключи”, ну или переменные, если угодно. В данном случае первый текст в [] это отображаемый текст, вторые [] заключают в себе ключ, где прописана ссылка. Ключ с ссылкой прописывается в любом месте панели и к ней также можно добавлять подсказку. Это может быть удобно в том случае, когда надо быстро заменить адрес ссылок: чтобы не выискивать их в тексте и удалять из скобок – просто поменять значение в ключах.
Чтобы получить ссылку вида mailto: можно использовать сокращенный вариант <ваш e-mail>
Списки – + *
- Список - + Список + * Список *
Промаркировать список можно любым из символов –, +, или *. Который нужно поставить в начале строки, а текст отделить пробелом. Для нумерации используйте 1., 2., 3. и т.д.:
1. Список 1 2. Список 2 3. Список 3
Списки можно вкладывать друг в друга, добавляя отступы в несколько пробелов (их число может разниться в зависимости от подуровня списка):
1. Список 1 - а - б - в 2. Список 2 3. Список 3
Цитаты >
> Здесь могла быть цитата Эскобара >> Цитата Эскобара второго уровня
С помощью знака > можно оформлять цитаты. На момент написания статьи цитаты на VK Видео Live никак дополнительно не выделяются (обычно слева отображается цветная вертикальная полоска), поэтому данный метод можно расценивать как способ отступа для текста.
Таблицы
| Топ | Юзер | Донат | |---|-------|---| | 1 | Vasya | 150 | | 2 | Petr | 100 | | 3 | Anna | 50 |
Можно составлять условные таблицы, где колонки отделяются | , а заголовки выделяются дефисами строкой ниже.
Заключение
Разметка текста для информационных блоков очень классный инструмент, который позволяет разнообразить оформление панелей и придать им более приглядный вид. Комбинируйте тэги, экспериментируйте, но сильно не заморачивайтесь: как мне кажется, в описание канала практически никто никогда не заходит 🙂
Если этот материал вам пригодился и у вас есть возможность, то поддержите автора и сайт небольшим донатом:
