Разработчика

Просмотр Markdown

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

Этот инструмент вам помог?

Что такое Просмотр Markdown?

Markdown — это лёгкий синтаксис форматирования, лежащий в основе README-файлов, постов в блогах, сообщений в чатах, документации и множества других мест, где нужно простое, читаемое форматирование без написания сырого HTML. Поскольку Markdown — это обычный текст, его легко писать где угодно, но также легко допустить небольшую ошибку в синтаксисе и не заметить её до публикации. Этот просмотрщик отображает ваш Markdown по мере ввода, рядом с исходным кодом, чтобы вы могли сразу заметить ошибки форматирования — пропущенный пробел после #, незакрытый блок кода или список, который не отделился от абзаца выше, — прежде чем вы зафиксируете README, опубликуете пост или отправите отформатированное сообщение.

Когда использовать этот калькулятор

  • Написание README для GitHub или GitLab и проверка форматирования перед коммитом
  • Создание черновика поста Markdown для блог-платформы, сайта документации или вики
  • Проверка корректности отображения письма или чат-сообщения в Markdown перед отправкой
  • Изучение синтаксиса Markdown путём экспериментов с различным форматированием и мгновенным просмотром результатов
  • Короткого фрагмента Markdown в HTML для вставки в CMS или шаблон письма
  • Отладка документа Markdown, где некоторое форматирование отображается не так, как ожидалось

Шаги:

  1. Введите или вставьте свой Markdown в левую панель.
  2. Наблюдайте, как отрендеренный HTML-предпросмотр мгновенно обновляется справа.
  3. Корректируйте синтаксис, пока предпросмотр не совпадёт с задуманным.
  4. Скопируйте готовый исходный код Markdown, когда результат вас устроит.

Формула

# Заголовок →

Заголовок

**жирный** → жирный *курсив* → курсив `код` → код [текст](url) → текст - пункт →
  • пункт

Варианты использования

  • Предпросмотр README для GitHub или GitLab перед коммитом
  • Подготовка отформатированных сообщений для Slack, Discord или других чатов с поддержкой Markdown
  • Проверка форматирования поста в блоге или документации перед публикацией
  • Изучение синтаксиса Markdown путём экспериментов с мгновенным результатом
  • Быстрое преобразование небольшого фрагмента Markdown в HTML для вставки в другое место

Основные преимущества

  • Видите ваш Markdown отрендеренным мгновенно, рядом с исходным текстом
  • Замечайте синтаксические ошибки до публикации где-либо
  • Работает полностью офлайн в браузере — ничего не загружается
  • Бесплатно, без регистрации, без ограничений по размеру файла для обычного использования

Советы профессионалов

  • Добавляйте пустую строку до и после списков и блоков кода для наиболее надёжного рендеринга в разных парсерах Markdown
  • Используйте двойные звёздочки для жирного текста и одинарные звёздочки (или подчёркивания) для курсива, чтобы избежать неоднозначности
  • Сначала просматривайте в этом инструменте, затем проверяйте на целевой платформе (GitHub, Slack и т.д.), поскольку некоторые поддерживают дополнительный синтаксис вроде таблиц
  • Соблюдайте последовательность заголовков (не перескакивайте с # на ###) для лучшей структуры документа и доступности

Распространенные ошибки

  • Забывание пустой строки, необходимой между абзацем и следующим за ним списком
  • Пропуск пробела после символов # в заголовках, что мешает их рендерингу
  • Незакрытый блок кода (```), который «поглощает» остальную часть документа как код
  • Использование одинарной звёздочки для жирного текста вместо двойной, из-за чего получается курсив

Объяснение ключевых терминов

CommonMark: Стандартизированная спецификация синтаксиса Markdown, созданная для уменьшения несоответствий
GFM: GitHub-Flavored Markdown — расширенный диалект с поддержкой таблиц и списков задач
Блок кода: Блок, ограниченный тройными обратными кавычками (```), используемый для форматирования многострочного кода
Встроенное форматирование: Форматирование, применяемое внутри одной строки, например *курсив* или `код`, в отличие от блочных элементов

Связанные понятия

Пример

Ввод «## Привет Это **жирный** текст, а это *курсив*.» рендерится как заголовок второго уровня, за которым следует абзац с жирным и курсивным текстом.

Интерпретация результатов

Левая панель показывает исходный текст Markdown, а правая отображает его в реальном времени как отформатированный HTML. Каждое нажатие клавиши мгновенно обновляет предпросмотр, поэтому вы сразу видите эффект каждого элемента синтаксиса. Частые проблемы с отображением обычно связаны с пробелами. Для большинства рендереров требуется пустая строка между абзацем и следующим за ним списком. Заголовкам нужен пробел после символов #. Ограничители кода (```) должны находиться на отдельной строке, чтобы запустить отображение блока кода. Предпросмотр — это близкое приближение того, как ваш Markdown будет выглядеть на большинстве платформ (GitHub, Slack, Discord и т. д.), но у каждой платформы свой рендерер с небольшими отличиями. Для всего, что выходит за рамки базового форматирования, всегда выполняйте финальную проверку на целевой платформе.

Часто задаваемые вопросы

Какой синтаксис Markdown поддерживает этот инструмент?
Заголовки (от # до ######), жирный текст (**текст**), курсив (*текст*), встроенный код (`код`), блоки кода (```), ссылки ([текст](url)), маркированные списки (- пункт), нумерованные списки (1. пункт) и цитаты (> текст).
Сохраняется или загружается ли моё содержимое куда-либо?
Нет. Всё разбирается и рендерится полностью в вашем браузере на JavaScript. Ничего из введённого не отправляется на сервер, не сохраняется и не логируется.
Почему моё форматирование отображается неправильно?
Markdown требует точного синтаксиса — например, многим рендерерам нужна пустая строка между абзацем и списком, чтобы корректно их разделить, а заголовкам нужен пробел после символов #. Проверьте, нет ли пропущенных пробелов или переносов строк вокруг используемого форматирования.
Можно ли использовать это для предпросмотра README GitHub перед коммитом?
Да, для распространённых элементов Markdown, которые поддерживает этот инструмент. Рендерер GitHub поддерживает некоторые дополнительные расширения GitHub-Flavored Markdown (например, таблицы и списки задач), которые отсутствуют в этом лёгком просмотрщике, поэтому всегда проверяйте итоговое отображение на самом GitHub для всего, что выходит за рамки базового синтаксиса.
Какую синтаксис Markdown поддерживает этот инструмент?
Заголовки (# до ######), жирный (**текст**), курсив (*текст*), инлайн-код (`код`), блоки кода (```), ссылки ([текст](url)), маркированные списки (- элемент), нумерованные списки (1. элемент) и цитаты (> текст).
Сохраняется или загружается мой контент куда-либо?
Нет. Всё полностью разбирается и отображается в вашем браузере с помощью JavaScript. Ничего из того, что вы вводите, не отправляется на сервер, не сохраняется и не записывается.
Могу ли я использовать это для предварительного просмотра README на GitHub перед коммитом?
Да, для стандартных элементов Markdown, которые поддерживает этот инструмент. Рендерер GitHub поддерживает некоторые дополнительные расширения GitHub-Flavored Markdown (такие как таблицы и списки задач), которые этот лёгкий превью не включает, поэтому всегда проверяйте финальную отрисовку на самом GitHub для всего, что выходит за рамки базового синтаксиса.
Как создать таблицу в Markdown?
Стандартный Markdown не поддерживает таблицы, но GitHub-Flavored Markdown поддерживает. Используйте символ pipe (|) для разделения столбцов и дефисы для разделителя заголовка. Этот превью не рендерит таблицы — проверьте финальную отрисовку на целевой платформе.
Могу ли я писать математику LaTeX в Markdown?
Этот превью не поддерживает математику LaTeX. Для математического рендеринга используйте инструмент с поддержкой KaTeX или MathJax. Некоторые платформы, такие как GitHub, также не рендерят LaTeX в Markdown.
Поддерживаются ли расширения Markdown, такие как списки задач?
Этот просмотрщик поддерживает основной синтаксис Markdown. Расширения зависят от рендерера целевой платформы.
Как добавить горизонтальную линию в Markdown?
Введите три или более дефиса (---), звёздочки (***) или подчёркивания (___) на отдельной строке. Это создаёт горизонтальную линию (<hr>).

Откройте больше инструментов

Свежая подборка из всей нашей библиотеки инструментов.