Перегляд Markdown

Введіть Markdown з одного боку та побачте, як він рендериться в реальному часі з іншого — заголовки, жирний текст, курсив, списки, блоки коду та посилання миттєво відображаються прямо у вашому браузері.

Що таке Перегляд Markdown?

Markdown — це легкий синтаксис форматування, що лежить в основі README, дописів у блогах, повідомлень у чатах, документації та безлічі інших місць, де потрібне просте, читабельне форматування без написання чистого HTML. Оскільки Markdown — це звичайний текст, його легко писати будь-де — але так само легко трохи помилитися в синтаксисі й не помітити цього, доки контент уже не опубліковано.

Цей переглядач рендерить ваш Markdown у міру введення, поруч із вихідним текстом, щоб ви могли одразу виявити помилки форматування — відсутній пробіл після #, незакритий блок коду чи список, що не відокремився від абзацу над ним — перш ніж закомітити README, опублікувати допис або надіслати відформатоване повідомлення.

Формула

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

**жирний** → <strong>жирний</strong>

*курсив* → <em>курсив</em>

`код` → <code>код</code>

[текст](url) → <a href="url">текст</a>

- пункт → <ul><li>пункт</li></ul>

Як розрахувати

Введіть або вставте ваш Markdown у ліву панель.
Спостерігайте, як попередній перегляд відрендереного HTML миттєво оновлюється праворуч.
Коригуйте синтаксис, доки перегляд не відповідатиме тому, що ви задумали.
Скопіюйте готовий вихідний текст Markdown, коли будете задоволені результатом.

Приклад

Введення "## Привіт\n\nЦе **жирний** текст, а це *курсив*." рендериться як заголовок другого рівня, за яким іде абзац із жирним і курсивним текстом.

Ключові переваги

Миттєвий перегляд вашого Markdown поруч із вихідним текстом
Виявлення синтаксичних помилок перед публікацією будь-де
Повністю офлайн-робота у вашому браузері — нічого не завантажується
Безкоштовно, без реєстрації, без обмежень розміру файлу для типового використання

Поширені помилки

Забувати про порожній рядок, потрібний між абзацом і наступним списком
Пропускати пробіл після символів # у заголовках, через що вони не рендеряться
Залишати незакритим блок коду (```), через що решта документа поглинається як код
Використовувати одну зірочку для жирного тексту замість двох, отримуючи курсив замість жирного

Поради

Додавайте порожній рядок перед списками та блоками коду й після них для найнадійнішого рендерингу в різних парсерах Markdown
Використовуйте подвійні зірочки для жирного тексту та одинарні зірочки (або підкреслення) для курсиву, щоб уникнути неоднозначності
Спершу перегляньте в цьому інструменті, а потім перевірте на цільовій платформі (GitHub, Slack тощо), оскільки деякі підтримують додатковий синтаксис на кшталт таблиць
Дотримуйтеся послідовності заголовків (не перестрибуйте з # на ###) для кращої структури документа й доступності

Ключові терміни

CommonMark: стандартизована специфікація синтаксису Markdown, покликана зменшити розбіжності
GFM: GitHub-Flavored Markdown, розширений діалект із підтримкою таблиць і списків завдань
Блок коду (Code fence): блок, обмежений потрійними зворотними лапками (```), що використовується для форматування багаторядкового коду
Вбудоване форматування (Inline formatting): форматування, застосоване в межах одного рядка, наприклад *курсив* чи `код`, на відміну від блокових елементів

Типові випадки використання

Попередній перегляд README на GitHub чи GitLab перед комітом
Чернетка відформатованих повідомлень для Slack, Discord чи інших чатів, що підтримують Markdown
Перевірка форматування допису в блозі чи документації перед публікацією
Вивчення синтаксису Markdown шляхом експериментів і миттєвого перегляду результатів
Швидке перетворення короткого фрагмента Markdown у HTML для вставлення в іншому місці

Часті запитання

Який синтаксис Markdown підтримує цей інструмент?

Заголовки (# до ######), жирний текст (**текст**), курсив (*текст*), вбудований код (`код`), блоки коду (```), посилання ([текст](url)), марковані списки (- пункт), нумеровані списки (1. пункт) і цитати (> текст).

Чи зберігається або завантажується десь мій контент?

Ні. Усе повністю розбирається та рендериться у вашому браузері за допомогою JavaScript. Те, що ви вводите, ніколи не надсилається на жоден сервер, не зберігається і не логується.

Чому моє форматування відображається неправильно?

Markdown вимагає точного синтаксису — наприклад, багатьом рендерерам потрібен порожній рядок між абзацом і списком, щоб коректно їх розділити, а заголовкам потрібен пробіл після символів #. Перевірте, чи не бракує пробілів або переносів рядків навколо форматування, яке ви використовуєте.

Чи можу я використати це для попереднього перегляду README на GitHub перед комітом?

Так, для поширених елементів Markdown, які підтримує цей інструмент. Рендерер GitHub підтримує кілька додаткових розширень GitHub-Flavored Markdown (таких як таблиці й списки завдань), яких немає в цьому легкому переглядачі, тож завжди перевіряйте фінальний рендеринг безпосередньо на GitHub для всього, що виходить за межі базового синтаксису.