Что такое Просмотр 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 — расширенный диалект с поддержкой таблиц и списков задач
- Блок кода: Блок, ограниченный тройными обратными кавычками (```), используемый для форматирования многострочного кода
- Встроенное форматирование: Форматирование, применяемое внутри одной строки, например *курсив* или `код`, в отличие от блочных элементов
Связанные понятия
- Форматер JSON:
- Тестер регулярных выражений:
- Генератор паролей:
- Конвертер цветов:
- Кодировщик/декодировщик URL:
Пример
Ввод «## Привет
Это **жирный** текст, а это *курсив*.» рендерится как заголовок второго уровня, за которым следует абзац с жирным и курсивным текстом.
Интерпретация результатов
Левая панель показывает исходный текст Markdown, а правая отображает его в реальном времени как отформатированный HTML. Каждое нажатие клавиши мгновенно обновляет предпросмотр, поэтому вы сразу видите эффект каждого элемента синтаксиса.
Частые проблемы с отображением обычно связаны с пробелами. Для большинства рендереров требуется пустая строка между абзацем и следующим за ним списком. Заголовкам нужен пробел после символов #. Ограничители кода (```) должны находиться на отдельной строке, чтобы запустить отображение блока кода.
Предпросмотр — это близкое приближение того, как ваш Markdown будет выглядеть на большинстве платформ (GitHub, Slack, Discord и т. д.), но у каждой платформы свой рендерер с небольшими отличиями. Для всего, что выходит за рамки базового форматирования, всегда выполняйте финальную проверку на целевой платформе.

