Конвертер Markdown в HTML

Конвертируйте Markdown в HTML прямо в браузере — полный GitHub Flavored Markdown, живой предпросмотр, подсветка синтаксиса. Экспорт фрагмента HTML, полного документа или email-совместимого inline-HTML. 100% приватно, без загрузки.

Без отслеживания Работает в браузере Бесплатно

Всё работает в вашем браузере. Ваш Markdown и HTML не покидают устройство.

Markdown

Предпросмотр

Custom CSS

HTML

Проверено на соответствие поведению спецификаций CommonMark/GFM, XSS-безопасную изолированную отрисовку и inline-стилизацию email-HTML — Команда инженеров Go-Tools · Jun 5, 2026

Что такое конвертация Markdown в HTML?

Конвертация Markdown в HTML превращает текстовый документ, написанный на Markdown — с `#` для заголовков, `**bold**`, `- ` для списков и `[text](url)` для ссылок — в HTML, который браузеры, системы управления контентом и почтовые клиенты действительно отображают. Markdown задуман читабельным как есть и лёгким для письма, но браузер не понимает `# Heading`; он понимает <h1>Heading</h1>. Конвертация перекрывает этот разрыв.

Под капотом процессор Markdown сначала разбирает ваш исходник в абстрактное синтаксическое дерево (AST) — структурированное представление, где заголовок, абзац, список и блок кода являются отдельными узлами со своим содержимым и атрибутами. Затем он сериализует это дерево в HTML, выдавая корректные теги и вложенность. Работа через AST, а не замена текста регулярными выражениями, — именно то, что позволяет конвертеру корректно и предсказуемо обрабатывать вложенные списки, таблицы и встроенный HTML. Две признанные грамматики — это CommonMark, точный стандарт, и GitHub Flavored Markdown (GFM), который расширяет его таблицами, списками задач, зачёркиванием и автоссылками.

Причина вообще конвертировать в том, что почти любое место публикации хочет HTML, а не Markdown. Генератор статического сайта, rich-text поле CMS, шаблон письма и вкладка браузера — все отрисовывают HTML. Поэтому типичный рабочий процесс — писать в удобном Markdown — README, документацию, черновик блога, заметки — и конвертировать в HTML в момент публикации. Этот инструмент делает конвертацию локально и показывает живой предпросмотр, поэтому вы видите отрисованный результат и можете скопировать точный HTML в нужной форме: фрагмент, полную страницу или готовую к email inline-разметку.

Обратная операция — HTML обратно в Markdown — не менее полезна, когда вы переносите существующий веб-контент в систему на основе Markdown. Для этого переключитесь на вкладку HTML → Markdown или откройте отдельный конвертер HTML в Markdown.

Markdown in:

  # Release Notes

  We shipped **tables** and `code`:

  | Feature | Status |
  | ------- | ------ |
  | GFM     | Done   |

  - [x] Parse to an AST
  - [ ] Profit

HTML out:

  <h1>Release Notes</h1>
  <p>We shipped <strong>tables</strong> and <code>code</code>:</p>
  <table>
    <thead><tr><th>Feature</th><th>Status</th></tr></thead>
    <tbody><tr><td>GFM</td><td>Done</td></tr></tbody>
  </table>
  <ul class="contains-task-list">
    <li class="task-list-item"><input type="checkbox" checked disabled> Parse to an AST</li>
    <li class="task-list-item"><input type="checkbox" disabled> Profit</li>
  </ul>

Ключевые возможности

Живой предпросмотр в раздельной панели

Печатайте Markdown слева и смотрите, как он отрисовывается справа в реальном времени, а HTML-вывод строится ниже по ходу. Предпросмотр отрисовывается в изолированном iframe, поэтому вы видите то, что покажет браузер, — и вставленные скрипты не запустятся.

Полный GitHub Flavored Markdown

Не только CommonMark — полное надмножество GFM: пайповые таблицы, списки задач (`- [x]`), зачёркивание (`~~`), автоссылки на URL и огороженные блоки кода. README или issue, написанные для GitHub, отрисовываются здесь ровно так же, как там.

Подсветка синтаксиса

Пометьте огороженный блок кода его языком (```js, ```python, ```sql), и конвертер подсветит его, оборачивая токены в span с классом языка на элементе <code>. Подключите таблицу стилей подсветки на вашей странице ради цвета.

Три формата вывода

Экспортируйте фрагмент HTML (разметка тела для шаблона или CMS), полный документ (самостоятельная страница , сохраняемая как .html) или Email inline HTML со стилями, перенесёнными на каждый элемент, чтобы Outlook и другие клиенты отрисовали его корректно.

Панель Custom CSS

Внедрите собственный CSS в живой предпросмотр, чтобы подогнать под типографику сайта или сымитировать стиль README у GitHub. Введите правила вроде h1 { color: #0969da; }, и предпросмотр обновится мгновенно, не затрагивая чистый HTML, который вы копируете.

Шпаргалка по синтаксису GFM

Быстрый справочник по синтаксису, который порождает HTML: `# H1` → заголовок, `**bold**` → <strong>, `*italic*` → <em>, `- item` → список, `1. item` → нумерованный список, `[text](url)` → ссылка, `` `code` `` → встроенный код, ` ```lang ` → огороженный код, `> quote` → цитата, `| a | b |` → таблица, `- [ ]` → список задач, `~~text~~` → зачёркивание.

100% приватно, в браузере

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

Примеры

GFM-таблица в HTML <table>

| Tool | Speed |
| ---- | ----- |
| GFM  | Fast  |

<table>
<thead><tr><th>Tool</th><th>Speed</th></tr></thead>
<tbody><tr><td>GFM</td><td>Fast</td></tr></tbody>
</table>

Пайповые таблицы GitHub Flavored Markdown не входят в обычный CommonMark, но этот конвертер их понимает и выдаёт корректную семантическую <table> с <thead> и <tbody> — готовую к стилизации или вставке в CMS.

Список задач в HTML с чекбоксами

- [x] Write the README
- [ ] Convert it to HTML

<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" checked disabled> Write the README</li>
<li class="task-list-item"><input type="checkbox" disabled> Convert it to HTML</li>
</ul>

Синтаксис списков задач GFM `- [x]` / `- [ ]` превращается в реальные отключённые чекбоксы — ровно так, как GitHub отрисовывает чек-лист, поэтому скопированный README выглядит на вашей странице точно так же.

Огороженный блок кода в подсвеченный <pre><code>

```js
const html = md.render(src)
```

<pre><code class="language-js"><span class="hljs-keyword">const</span> html = md.render(src)
</code></pre>

Укажите язык после открывающих обратных кавычек, и конвертер применит подсветку синтаксиса, оборачивая токены в span с классом language-js на элементе <code>. Подключите таблицу стилей подсветки — и код раскрасится.

README в полный HTML-документ

# My Project

A short description and a [link](https://example.com).

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>My Project</title></head>
<body>
<h1>My Project</h1>
<p>A short description and a <a href="https://example.com">link</a>.</p>
</body>
</html>

Переключите вывод на «Полный документ», и конвертер обернёт отрисованный HTML в полноценную страницу с <head> и charset — самостоятельный файл .html, который можно открыть в любом браузере или скачать.

Как преобразовать Markdown в HTML

1

Введите или вставьте Markdown

Поместите ваш Markdown — README, релиз-ноты, тело issue — в поле ввода. Поддерживается полный GitHub Flavored Markdown: таблицы, списки задач, зачёркивание, автоссылки и огороженные блоки кода. Живой предпросмотр и HTML-вывод обновляются по мере ввода, всё в браузере.
2

Выберите формат вывода

Выберите «Фрагмент HTML» для вставки в шаблон или CMS, «Полный документ» для самостоятельной страницы .html или «Email inline» для inline-стилизованного HTML, переживающего Outlook. Добавляйте теги языка к оградам кода для подсветки и используйте панель Custom CSS для стилизации предпросмотра.
3

Скопируйте или скачайте

Нажмите «Скопировать», чтобы взять HTML, или «Скачать», чтобы сохранить его как файл. Чтобы обратить конвертацию, переключитесь на вкладку HTML → Markdown и вставьте ваш HTML, чтобы получить чистый Markdown обратно.

Частые ошибки

Неэкранированный HTML проглочен в прозе

Markdown пропускает сырой HTML, поэтому угловая скобка, которую вы имели в виду как текст — например, когда пишете о <Component> или о дженерике List<T> — разбирается как HTML-тег и исчезает из вывода. Экранируйте скобку обратным слешем или HTML-сущностью либо оберните текст в код-спан, чтобы он отрисовался буквально.

✗ Неверно

Use the <Header> component to wrap pages.
<!-- <Header> is parsed as a tag and vanishes -->

✓ Верно

Use the `<Header>` component to wrap pages.
<!-- backticks keep it literal: renders <Header> -->

Смещённые или некорректные пайпы таблицы

GFM-таблице нужны строка заголовка, строка-разделитель из дефисов и хотя бы один пайп в строке. Если забыть строку-разделитель или дать число столбцов, отличное от заголовка, таблица ломается — она откатывается к обычному абзацу из пайпов. Ячейки не обязаны выравниваться визуально, но в каждой строке должно быть одинаковое число столбцов.

✗ Неверно

| Name | Role |
| Alice | Admin |
<!-- no |---|---| delimiter row: not a table -->

✓ Верно

| Name | Role |
| ---- | ---- |
| Alice | Admin |
<!-- delimiter row present: renders a table -->

Ограда кода без языка

Огороженный блок кода без информационной строки языка отрисовывается как блок <pre><code> без класса языка, поэтому не получает подсветки. Код всё равно отображается, просто монохромным. Добавьте язык сразу после открывающих обратных кавычек, чтобы включить подсветку; пробел между кавычками и именем отключает её.

✗ Неверно

```
const x = 1
```
<!-- no language → no highlighting -->

✓ Верно

```js
const x = 1
```
<!-- language-js → highlighted -->

Использование фрагмента там, где нужен полный документ

Копирование вывода «Фрагмент HTML» и сохранение его прямо как файла .html даёт страницу без doctype, без charset и без <html>/<head>/<body>. Браузеры часто всё равно её отрисуют, но режим quirks и отсутствие charset могут сломать диакритику и вёрстку. Когда HTML должен быть самостоятельным, переключитесь на формат «Полный документ».

✗ Неверно

<h1>Title</h1>
<p>Saved as page.html — no doctype, no charset.</p>

✓ Верно

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><title>Title</title></head>
<body><h1>Title</h1><p>Complete, standalone page.</p></body></html>

Типичные сценарии

Публикация в статический сайт или CMS: Пишите контент в Markdown, конвертируйте во фрагмент HTML и вставляйте его в шаблон статического сайта или rich-text поле CMS. Вы получаете чистую семантическую разметку — заголовки, списки, таблицы — без мешающей обёртки страницы.
Предпросмотр README до пуша: Вставьте ваш README.md и смотрите, как живой предпросмотр отрисовывает его с полным GFM — таблицы, списки задач, огороженный код — чтобы поймать сломанную таблицу или пропущенную ограду кода до коммита, а не после того, как GitHub покажет это всему миру.
Превратить заметки в страницу для шеринга: Заметки со встречи, дизайн-док или черновик, написанные в Markdown, становятся полноценной HTML-страницей в один клик. Выберите «Полный документ», скачайте файл .html — и у вас есть то, что откроется в любом браузере и разместится где угодно.
Сборка email-совместимого inline-HTML: Почтовые клиенты вырезают блоки <style>, поэтому напишите сообщение в Markdown и экспортируйте формат Email inline, который переносит CSS на каждый элемент как атрибут style. Результат отрисовывается корректно в Outlook и других клиентах, игнорирующих стили уровня документа.
Конвертация файла .md в скачиваемый .html: Нужна офлайновая, самодостаточная HTML-версия документа Markdown? Вставьте его, выберите «Полный документ» и «Скачать» — вы получите самостоятельный файл .html с корректным doctype и charset, без инструмента сборки или командной строки.
Встраивание отрисованной документации в приложение: Генерируете документацию, чейнджлоги или справку из Markdown, хранящегося в репозитории? Используйте этот инструмент, чтобы точно увидеть, какой HTML порождает данный исходник Markdown, и подогнать рендерер вашего приложения и стилизацию вывода.

Технические детали

CommonMark vs GitHub Flavored Markdown: CommonMark — это строгая, однозначная спецификация Markdown, определяющая ровно то, как разбираются заголовки, выделение, списки, ссылки и блоки кода. GitHub Flavored Markdown (GFM) — строгое надмножество: он сохраняет всё, что определяет CommonMark, и добавляет четыре расширения — пайповые таблицы, элементы списка задач (`- [x]`), зачёркивание (`~~text~~`) и автоссылки на голые URL. Поскольку GFM лишь добавляет возможности, любой валидный документ CommonMark также валиден как GFM. Этот конвертер реализует надмножество GFM, поэтому документы, написанные под любую из грамматик, отрисовываются корректно.
XSS-безопасная изолированная отрисовка: Markdown намеренно допускает встроенный сырой HTML, а значит документ Markdown может содержать тег <script> или обработчик события вроде onerror. Живой предпросмотр защищается от этого, отрисовываясь внутри <iframe sandbox=""> с отключёнными скриптами, поэтому активное содержимое в вашем вводе не может выполниться при предпросмотре — это важно при конвертации Markdown из недоверенного источника. Сериализованный HTML, который выдаёт инструмент, — точное отображение вашего ввода; если вы планируете публиковать HTML, полученный из недоверенного Markdown, прогоните его через очиститель вроде DOMPurify на своём сервере перед отдачей.
Совместимость с email-HTML: HTML-письма отрисовываются мешаниной движков с печально ограниченной поддержкой CSS. Outlook на Windows использует движок рендеринга Word и игнорирует блоки <style> в head документа, поэтому любая стилизация на классах молча исчезает; надёжный подход — inline-атрибуты style на каждом элементе, что и производит вывод Email inline. Изображения — другая ловушка: многие клиенты блокируют удалённые изображения, пока получатель не согласится, поэтому встраивание маленьких изображений как data URI отрисовывает их сразу, а крупные удалённые изображения могут вообще не появиться. Держите разметку простой и тестируйте в целевых клиентах.
Синхронная подсветка в браузере: Когда огороженный блок кода несёт информационную строку языка (```js), конвертер запускает синхронную подсветку по его содержимому, токенизируя исходник и оборачивая каждый токен в <span> с классом вроде hljs-keyword или hljs-string, плюс класс language-js на элементе <code>. Подсветка структурна — она добавляет классы, а не цвета, — поэтому странице назначения нужна соответствующая таблица стилей подсветки для отрисовки палитры. Поскольку всё работает синхронно в браузере, подсвеченный HTML появляется в момент ввода, без сетевого вызова.

Лучшие практики

Выбирайте формат вывода под назначение: Подбирайте формат под то, куда идёт HTML. Поле CMS или шаблон уже имеют обёртку страницы, поэтому вставляйте фрагмент HTML. Файл, который вы хотите открыть прямо в браузере, требует полного документа с doctype и charset. Письмо требует Email inline, чтобы стили пережили клиентов, вырезающих блоки <style>. Вставка не той формы — самая частая избегаемая ошибка.
Всегда помечайте ограды кода языком: Пишите язык сразу после открывающих обратных кавычек — ```js, ```python, ```sql — без пробела, чтобы конвертер мог подсветить блок и добавить правильный класс языка. Голая ограда даёт неоформленный, неподсвеченный код. Используйте язык, который распознаёт подсветка; неизвестное или ошибочно написанное имя откатывается к обычному тексту.
Очищайте недоверенный Markdown перед публикацией: Предпросмотр изолирован, но HTML, который выдаёт инструмент, — точное отображение, включая любой сырой HTML или <script> во вводе. Если этот Markdown пришёл от пользователей или из другого недоверенного источника и вы намерены отдавать результат другим людям, сначала прогоните HTML через очиститель вроде DOMPurify на своём сервере. Песочница защищает вас при конвертации, а не ваших посетителей после публикации.
Держите email-HTML простым и inline: Для писем предпочитайте формат Email inline, держите вёрстку простой и избегайте свойств CSS, которые Outlook и другие клиенты отбрасывают. Встраивайте маленькие изображения как data URI, чтобы они отрисовывались даже при блокировке удалённых изображений, и всегда отправляйте тестовое письмо себе перед широкой рассылкой — рендеринг email самый непрощающий из всех целевых HTML.
Экранируйте литеральные HTML-символы в тексте: Если вы хотите, чтобы литеральный < или & отображался как текст, а не интерпретировался как тег или сущность, экранируйте его обратным слешем (\<) или HTML-сущностью (<). Markdown пропускает сырой HTML насквозь, поэтому неэкранированный <example> в прозе может быть проглочен как неизвестный тег и исчезнуть из отрисованного вывода.

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

Поддерживается ли GitHub Flavored Markdown (GFM)?

Да. Конвертер отрисовывает полный надмножество GitHub Flavored Markdown поверх CommonMark: пайповые таблицы, списки задач (`- [x]` / `- [ ]`), зачёркивание через `~~text~~`, автоссылки на URL и огороженные блоки кода с информационной строкой языка. Это значит, что README, тело issue или wiki-страница, написанные для GitHub, отрисовываются здесь так же, как их отрисовывает GitHub, поэтому ваш предпросмотр README совпадает с реальностью ещё до пуша. Обычные документы CommonMark тоже работают — GFM лишь добавляет возможности, ничего не убирая.

Как получить email-совместимый inline-HTML со стилями?

Выберите вкладку вывода «Email inline». Большинство почтовых клиентов — особенно Outlook — вырезают или игнорируют блоки <style> в head документа, поэтому любой CSS, помещённый туда, отбрасывается и форматирование разваливается. Формат Email inline решает это, перенося стили прямо на каждый элемент в виде атрибута style (например, <h1 style="font-size:2em;margin:0 0 16px">), который клиенты соблюдают. Вставьте результат прямо в шаблон письма или ESP. Держите изображения маленькими и предпочитайте data URI или абсолютные https-URL, поскольку многие клиенты по умолчанию блокируют удалённые изображения.

В чём разница между фрагментом HTML и полным документом?

Фрагмент HTML — это только отрисованная разметка тела: <h1>, <p>, <ul>, <table> и так далее, без окружающей страницы. Используйте его, когда вставляете во что-то, у чего уже есть собственные <html>, <head> и <body>: rich-text поле CMS, шаблон статического сайта или React-компонент. Полный документ оборачивает ту же разметку в полноценную страницу с <head>, объявлением charset и <title>, поэтому она самодостаточна — откройте её в браузере или сохраните как файл .html. Выбор неправильного варианта — частая ошибка: фрагмент, брошенный во вкладку браузера, отрисуется, но без doctype и charset может вести себя некорректно.

Безопасен ли отрисованный HTML для предпросмотра в плане XSS?

Живой предпросмотр отрисовывается внутри изолированного (sandboxed) <iframe> с отключёнными скриптами, поэтому даже если ваш Markdown содержит сырые теги <script> или обработчик onerror, ничего не выполнится при предпросмотре. Это важно, поскольку Markdown по замыслу допускает встроенный HTML, и конвертация недоверенного Markdown иначе могла бы внедрить активное содержимое. Песочница защищает вас, человека, выполняющего конвертацию. Учтите, что HTML-строка, которую выдаёт инструмент, — это точное отображение вашего ввода; если этот ввод пришёл из недоверенного источника и вы намерены опубликовать результат, очистите его на своём сервере (например, через DOMPurify) перед отдачей другим пользователям.

Можно ли добавить собственный CSS в предпросмотр?

Да. Откройте панель «Custom CSS» и введите любые правила — например, h1 { color: #0969da; } или table { border-collapse: collapse; }. Стили внедряются в изолированный iframe предпросмотра, поэтому вы сразу видите ваш Markdown отрисованным в вашем оформлении — удобно для подгонки под типографику сайта или проверки, как README будет выглядеть со стилями в духе GitHub. Custom CSS влияет только на живой предпросмотр; HTML, который вы копируете из вкладок вывода, остаётся неоформленной разметкой фрагмента или документа, если только вы не выбрали формат Email inline.

Загружаются ли мои файлы или текст на сервер?

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

Работает ли инструмент офлайн?

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

Как преобразовать файл Markdown (.md) в файл HTML?

Вставьте или откройте ваш Markdown в поле ввода, выберите вывод «Полный документ», чтобы результат был самостоятельной страницей, затем нажмите «Скачать», чтобы сохранить его как файл .html, который откроется в любом браузере. Если нужна только разметка тела для вставки в существующий шаблон, выберите «Фрагмент HTML» и скопируйте его. Отдельной загрузки нет — вставьте содержимое вашего файла .md (или перетащите его, где это поддерживается), и сконвертированный HTML готов мгновенно, полностью в браузере.

Почему мой блок кода не подсвечен?

Подсветка синтаксиса включается только тогда, когда вы сообщаете конвертеру, на каком языке огороженный блок кода. Напишите язык как информационную строку сразу после открывающих тройных обратных кавычек — ```js, ```python, ```sql — без пробела. Голая ограда ``` даёт блок <pre><code> без класса языка и потому без цвета. Опечатка или неподдерживаемое имя языка (```javscript) тоже трактуется как обычный текст. Помните также, что подсветка добавляет классы <span> вроде hljs-keyword; чтобы цвета действительно появились, на странице назначения нужна соответствующая таблица стилей подсветки.

Можно ли преобразовать HTML обратно в Markdown?

Да. Переключитесь на вкладку HTML → Markdown или откройте отдельный конвертер HTML в Markdown, вставьте ваш HTML и получите чистый Markdown обратно — с опциями ATX vs Setext заголовков и inline vs reference ссылок. Оба направления дополняют друг друга: используйте Markdown → HTML для публикации или предпросмотра, а HTML → Markdown — чтобы перенести существующий веб-контент в Markdown-процесс, например в статический сайт или репозиторий документации. Чтобы сначала привести HTML в порядок, наш HTML-форматтер аккуратно отформатирует его.

Конвертер Markdown в HTML

Что такое конвертация Markdown в HTML?

Ключевые возможности

Живой предпросмотр в раздельной панели

Полный GitHub Flavored Markdown

Подсветка синтаксиса

Три формата вывода

Панель Custom CSS

Шпаргалка по синтаксису GFM

100% приватно, в браузере

Примеры

GFM-таблица в HTML <table>

Список задач в HTML с чекбоксами

Огороженный блок кода в подсвеченный <pre><code>

README в полный HTML-документ

Как преобразовать Markdown в HTML

Введите или вставьте Markdown

Выберите формат вывода

Скопируйте или скачайте

Частые ошибки

Неэкранированный HTML проглочен в прозе

Смещённые или некорректные пайпы таблицы

Ограда кода без языка

Использование фрагмента там, где нужен полный документ

Типичные сценарии

Технические детали

Лучшие практики

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

Похожие инструменты

Base64 декодер и кодировщик

Конвертер Base64 в изображение

Конвертер CSV в JSON

Конвертер HTML в Markdown

Конвертер изображений в Base64

JSON Diff и сравнение