Що таке Перегляд Markdown?
Markdown — це легкий синтаксис форматування, що лежить в основі файлів README, дописів у блогах, повідомлень у чатах, документації та безлічі інших місць, де потрібне просте, читабельне форматування без написання чистого HTML. Оскільки Markdown — це звичайний текст, його легко писати будь-де, але також легко допустити незначні синтаксичні помилки й не помітити їх до публікації.
Цей переглядач відображає ваш Markdown під час введення, поруч із вихідним кодом, щоб ви могли одразу помітити помилки форматування — відсутній пробіл після #, незакриту кодову огорожу або список, що не відділився від попереднього абзацу — перед тим, як закомітити README, опублікувати допис чи надіслати відформатоване повідомлення.
Коли використовувати цей калькулятор
- Написання README для GitHub або GitLab та перевірка форматування перед комітом
- Створення чернетки посту Markdown для блог-платформи, сайту документації або вікі
- Перевірка коректності відображення листа або чат-повідомлення в Markdown перед надсиланням
- Вивчення синтаксису Markdown шляхом експериментів з різним форматуванням та миттєвим переглядом результатів
- Короткого фрагмента Markdown в HTML для вставки в CMS або шаблон листа
- Відладка документа Markdown, де деяке форматування відображається не так, як очікувалося
Кроки:
- Введіть або вставте ваш Markdown у ліву панель.
- Спостерігайте, як попередній перегляд відрендереного HTML миттєво оновлюється праворуч.
- Коригуйте синтаксис, доки перегляд не відповідатиме тому, що ви задумали.
- Скопіюйте готовий вихідний текст Markdown, коли будете задоволені результатом.
Формула
# Заголовок →
Заголовок
**жирний** → жирний *курсив* → курсив `код` →код
[текст](url) → текст
- пункт → - пункт
Випадки використання
- Попередній перегляд README на GitHub або GitLab перед комітом
- Створення чернеток відформатованих повідомлень для Slack, Discord або інших чатів із підтримкою Markdown
- Перевірка форматування допису в блозі чи документації перед публікацією
- Вивчення синтаксису Markdown шляхом експериментів і миттєвого перегляду результатів
- Швидке перетворення короткого фрагмента Markdown у HTML для вставлення в іншому місці
Ключові переваги
- Миттєвий перегляд вашого Markdown поруч із вихідним текстом
- Виявлення синтаксичних помилок перед публікацією будь-де
- Повністю офлайн-робота у вашому браузері — нічого не завантажується
- Безкоштовно, без реєстрації, без обмежень розміру файлу для типового використання
Поради
- Додавайте порожній рядок перед списками та блоками коду й після них для найнадійнішого рендерингу в різних парсерах Markdown
- Використовуйте подвійні зірочки для жирного тексту та одинарні зірочки (або підкреслення) для курсиву, щоб уникнути неоднозначності
- Спершу перегляньте в цьому інструменті, а потім перевірте на цільовій платформі (GitHub, Slack тощо), оскільки деякі підтримують додатковий синтаксис на кшталт таблиць
- Дотримуйтеся послідовності заголовків (не перестрибуйте з # на ###) для кращої структури документа й доступності
Поширені помилки
- Забувати про порожній рядок, потрібний між абзацом і наступним списком
- Пропускати пробіл після символів # у заголовках, через що вони не рендеряться
- Залишати незакритим блок коду (```), через що решта документа поглинається як код
- Використовувати одну зірочку для жирного тексту замість двох, отримуючи курсив замість жирного
Ключові терміни
- CommonMark: стандартизована специфікація синтаксису Markdown, покликана зменшити розбіжності
- GFM: GitHub-Flavored Markdown — розширений діалект із підтримкою таблиць та списків завдань
- Блок коду (Code fence): блок, обмежений потрійними зворотними лапками (```), що використовується для форматування багаторядкового коду
- Вбудоване форматування (Inline formatting): форматування, застосоване в межах одного рядка, наприклад *курсив* чи `код`, на відміну від блокових елементів
Пов'язані концепції
- Форматер JSON:
- Тестер регулярних виразів:
- Генератор паролів:
- Конвертер кольоріv:
- Кодувальник/декодувальник URL:
Приклад
Введення "## Привіт
Це **жирний** текст, а це *курсив*." рендериться як заголовок другого рівня, за яким іде абзац із жирним і курсивним текстом.
Інтерпретація результатів
Ліва панель показує вихідний текст Markdown, а права відображає його в реальному часі як відформатований HTML. Кожне натискання клавіші миттєво оновлює попередній перегляд, тож ви одразу бачите ефект кожного елемента синтаксису.
Поширені проблеми з відображенням зазвичай пов'язані з пробілами. Більшості рендерерів потрібен порожній рядок між абзацом і списком, що йде після нього. Заголовкам потрібен пробіл після символів #. Обмежувачі коду (```) мають бути на окремому рядку, щоб запустити відображення блоку коду.
Попередній перегляд — це близьке наближення того, як ваш Markdown виглядатиме на більшості платформ (GitHub, Slack, Discord тощо), але кожна платформа має власний рендерер із незначними відмінностями. Для всього, що виходить за межі базового форматування, завжди виконуйте фінальну перевірку на цільовій платформі.