Введите Markdown с одной стороны и увидьте его отрендеренным вживую с другой — заголовки, жирный текст, курсив, списки, блоки кода и ссылки мгновенно отображаются прямо в браузере.
Загрузка калькулятора...
Этот инструмент вам помог?
Что такое Просмотр Markdown?
Markdown — это лёгкий синтаксис форматирования, лежащий в основе README-файлов, постов в блогах, сообщений в чатах, документации и множества других мест, где нужно простое, читаемое форматирование без написания сырого HTML. Поскольку Markdown — это обычный текст, его легко писать где угодно, но также легко допустить небольшую ошибку в синтаксисе и не заметить её до публикации.
Этот просмотрщик отображает ваш Markdown по мере ввода, рядом с исходным кодом, чтобы вы могли сразу заметить ошибки форматирования — пропущенный пробел после #, незакрытый блок кода или список, который не отделился от абзаца выше, — прежде чем вы зафиксируете README, опубликуете пост или отправите отформатированное сообщение.
Когда использовать этот калькулятор
Writing a GitHub or GitLab README and want to verify formatting before committing
Drafting a Markdown post for a blog platform, documentation site, or wiki
Checking a Markdown email or chat message renders correctly before sending
Learning Markdown syntax by experimenting with different formatting and seeing instant results
Converting a short Markdown snippet to HTML for pasting into a CMS or email template
Debugging a Markdown document where some formatting isn't rendering as expected
Шаги:
Введите или вставьте свой Markdown в левую панель.
Наблюдайте, как отрендеренный HTML-предпросмотр мгновенно обновляется справа.
Корректируйте синтаксис, пока предпросмотр не совпадёт с задуманным.
Скопируйте готовый исходный код Markdown, когда результат вас устроит.
Формула
# Заголовок →
Заголовок
**жирный** → жирный
*курсив* → курсив
`код` → код
[текст](url) → текст
- пункт →
пункт
Варианты использования
Предпросмотр README для GitHub или GitLab перед коммитом
Подготовка отформатированных сообщений для Slack, Discord или других чатов с поддержкой Markdown
Проверка форматирования поста в блоге или документации перед публикацией
Изучение синтаксиса Markdown путём экспериментов с мгновенным результатом
Быстрое преобразование небольшого фрагмента Markdown в HTML для вставки в другое место
Основные преимущества
Видите ваш Markdown отрендеренным мгновенно, рядом с исходным текстом
Замечайте синтаксические ошибки до публикации где-либо
Работает полностью офлайн в браузере — ничего не загружается
Бесплатно, без регистрации, без ограничений по размеру файла для обычного использования
Советы профессионалов
Добавляйте пустую строку до и после списков и блоков кода для наиболее надёжного рендеринга в разных парсерах Markdown
Используйте двойные звёздочки для жирного текста и одинарные звёздочки (или подчёркивания) для курсива, чтобы избежать неоднозначности
Сначала просматривайте в этом инструменте, затем проверяйте на целевой платформе (GitHub, Slack и т.д.), поскольку некоторые поддерживают дополнительный синтаксис вроде таблиц
Соблюдайте последовательность заголовков (не перескакивайте с # на ###) для лучшей структуры документа и доступности
Распространенные ошибки
Забывание пустой строки, необходимой между абзацем и следующим за ним списком
Пропуск пробела после символов # в заголовках, что мешает их рендерингу
Незакрытый блок кода (```), который «поглощает» остальную часть документа как код
Использование одинарной звёздочки для жирного текста вместо двойной, из-за чего получается курсив
Объяснение ключевых терминов
CommonMark: Стандартизированная спецификация синтаксиса Markdown, созданная для уменьшения несоответствий
GFM: GitHub-Flavored Markdown — расширенный диалект с поддержкой таблиц и списков задач
Блок кода: Блок, ограниченный тройными обратными кавычками (```), используемый для форматирования многострочного кода
Встроенное форматирование: Форматирование, применяемое внутри одной строки, например *курсив* или `код`, в отличие от блочных элементов
Связанные понятия
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
Пример
Ввод «## Привет\n\nЭто **жирный** текст, а это *курсив*.» рендерится как заголовок второго уровня, за которым следует абзац с жирным и курсивным текстом.
Интерпретация результатов
Левая панель показывает исходный текст Markdown, а правая отображает его в реальном времени как отформатированный HTML. Каждое нажатие клавиши мгновенно обновляет предпросмотр, поэтому вы сразу видите эффект каждого элемента синтаксиса.
Частые проблемы с отображением обычно связаны с пробелами. Для большинства рендереров требуется пустая строка между абзацем и следующим за ним списком. Заголовкам нужен пробел после символов #. Ограничители кода (```) должны находиться на отдельной строке, чтобы запустить отображение блока кода.
Предпросмотр — это близкое приближение того, как ваш Markdown будет выглядеть на большинстве платформ (GitHub, Slack, Discord и т. д.), но у каждой платформы свой рендерер с небольшими отличиями. Для всего, что выходит за рамки базового форматирования, всегда выполняйте финальную проверку на целевой платформе.
Часто задаваемые вопросы
Какой синтаксис Markdown поддерживает этот инструмент?
Заголовки (от # до ######), жирный текст (**текст**), курсив (*текст*), встроенный код (`код`), блоки кода (```), ссылки ([текст](url)), маркированные списки (- пункт), нумерованные списки (1. пункт) и цитаты (> текст).
Сохраняется или загружается ли моё содержимое куда-либо?
Нет. Всё разбирается и рендерится полностью в вашем браузере на JavaScript. Ничего из введённого не отправляется на сервер, не сохраняется и не логируется.
Почему моё форматирование отображается неправильно?
Markdown требует точного синтаксиса — например, многим рендерерам нужна пустая строка между абзацем и списком, чтобы корректно их разделить, а заголовкам нужен пробел после символов #. Проверьте, нет ли пропущенных пробелов или переносов строк вокруг используемого форматирования.
Можно ли использовать это для предпросмотра README GitHub перед коммитом?
Да, для распространённых элементов Markdown, которые поддерживает этот инструмент. Рендерер GitHub поддерживает некоторые дополнительные расширения GitHub-Flavored Markdown (например, таблицы и списки задач), которые отсутствуют в этом лёгком просмотрщике, поэтому всегда проверяйте итоговое отображение на самом GitHub для всего, что выходит за рамки базового синтаксиса.
Нет. Всё разбирается и рендерится полностью в вашем браузере на JavaScript. Ничего из введённого не отправляется на сервер, не сохраняется и не логируется.
Why isn't my formatting showing up correctly?
Markdown требует точного синтаксиса — например, многим рендерерам нужна пустая строка между абзацем и списком, чтобы корректно их разделить, а заголовкам нужен пробел после символов #. Проверьте, нет ли пропущенных пробелов или переносов строк вокруг используемого форматирования.
Can I use this to preview a GitHub README before committing?
Да, для распространённых элементов Markdown, которые поддерживает этот инструмент. Рендерер GitHub поддерживает некоторые дополнительные расширения GitHub-Flavored Markdown (например, таблицы и списки задач), которые отсутствуют в этом лёгком просмотрщике, поэтому всегда проверяйте итоговое отображение на самом GitHub для всего, что выходит за рамки базового синтаксиса.
В чем разница между Markdown и HTML?
Markdown — это легкий язык разметки, который легко писать и читать как обычный текст. HTML — это полноценный язык разметки с более сложным синтаксисом. Markdown часто преобразуется в HTML для отображения. Этот инструмент рендерит Markdown как HTML в реальном времени.
How do I create a table in Markdown?
Стандартный Markdown не поддерживает таблицы, а GitHub-Flavored Markdown — поддерживает. Используйте символ вертикальной черты (|) для разделения столбцов и дефисы для разделителя заголовка. Этот просмотрщик не отображает таблицы — проверьте итоговое отображение на целевой платформе.
Can I write LaTeX math in Markdown?
This previewer doesn't support LaTeX math. For math rendering, use a tool that supports KaTeX or MathJax. Some platforms like GitHub don't render LaTeX in Markdown either.
