Конвертер Markdown в HTML — преобразуйте Markdown в HTML онлайн _

Что такое преобразование Markdown в HTML?

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

Какие возможности GitHub Flavored Markdown поддерживаются?

Встроенный парсер marked@12.0.2 поддерживает полное надмножество GFM: заголовки ATX от # до ######, упорядоченные и неупорядоченные списки с вложенностью, жирный **text** и курсивный *text*, зачёркивание ~~text~~, встроенные ссылки [text](url) и встроенные изображения ![alt](src), ограждённые блоки кода с опциональной языковой меткой (```js), inline-фрагменты кода `code`, таблицы с разделителем | и строкой заголовка, списки задач GFM - [ ] / - [x], цитаты >, горизонтальные линии --- и автоссылки. Каждый элемент рендерится в панели предпросмотра так же, как GitHub рендерит его.

Как работает преобразование Markdown в HTML?

Каждое преобразование выполняется локально в вашем браузере с помощью двух встроенных библиотек — без CDN, без fetch, без телеметрии. Основные шаги:

1. Разбор: marked.parse(source) читает ваш Markdown и возвращает строку HTML. Парсер работает в режиме GFM, поэтому таблицы, списки задач, зачёркивание и автоссылки распознаются.
2. Очистка: вывод HTML пропускается через DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }), прежде чем попасть в innerHTML. DOMPurify — тот же XSS-санитайзер, что используют Mozilla MDN, Atlassian и Microsoft 365 — он разбирает HTML, обходит DOM и удаляет элементы <script>, каждый атрибут-обработчик on* и URI-схемы javascript:.
3. Рендер: очищенный HTML записывается в панель предпросмотра через innerHTML, а сырой HTML отображается во второй панели через доступную только для чтения <textarea>, чтобы вы могли скопировать разметку. Живой режим дебаунсит ввод на 150 мс, так что предпросмотр обновляется по мере набора без нагрузки на парсер.

Почему стоит преобразовывать Markdown в HTML этим инструментом?

• Конфиденциальность: каждый этап разбора, очистки и рендера происходит в вашем браузере. Markdown — включая неопубликованные посты блога, черновики внутренней документации и конфиденциальный README — никогда не попадает на наши серверы.
• Безопасно к XSS по умолчанию: панель предпросмотра пропускает каждую HTML-строку через DOMPurify перед innerHTML, так что случайный тег <script> или обработчик onerror= в сыром HTML внутри вашего Markdown даёт инертный предпросмотр. Вкладка исходника показывает несаниталированный вывод для инспекции — он сидит внутри <textarea> через value и никогда не исполняется.
• GFM-полнота: таблицы, зачёркивания, списки задач и автоссылки рендерятся так же, как GitHub рендерит их. Markdown-таблица с разделителем | становится HTML-таблицей <table> с <thead> и <tbody> — без потерянных строк, без уплощённой структуры.

Каковы распространённые применения преобразования Markdown в HTML?

Превращение Markdown в HTML встречается в документации, работе со статическими сайтами и создании писем:

• Создание README на GitHub: написание README проекта локально в Markdown и предпросмотр отрендеренного HTML перед пушем. Предпросмотр соответствует GFM-рендеру GitHub для таблиц, списков задач и ограждённых блоков кода.
• Контент статического сайта: вставка поста Markdown и получение HTML для поля CMS или шаблонизатора, который ожидает разметку, а не Markdown-источник.
• Email-шаблоны: написание тела транзакционного письма в Markdown и преобразование в HTML для шаблонизатора провайдера. Вывод — простой семантический HTML, без inline-стилей и без артефактов почтовых клиентов.

Как выглядит пример преобразования Markdown в HTML?

Вставка # Title\n\n- item 1\n- item 2\n\n[link](https://example.com) создаёт панель предпросмотра, содержащую <h1>Title</h1>, маркированный список из двух элементов и <a href="https://example.com">link</a>. Вкладка исходника показывает точную HTML-строку, чтобы вы могли скопировать её прямо в шаблон. Таблица с разделителем | и строкой выравнивания |---|---| становится полноценным <table> с <thead> и <tbody> — подтверждая, что таблицы GFM рендерятся так же, как GitHub рендерит их.

Работает ли этот конвертер Markdown в HTML полностью в моём браузере?

Да. Каждый этап разбора, очистки и рендера выполняется локально как JavaScript внутри вкладки браузера. Две встроенные библиотеки — marked@12.0.2 и DOMPurify@3.1.7 — поставляются с того же источника, что и страница, поэтому нет зависимости от CDN, нет fetch, нет XMLHttpRequest, нет navigator.sendBeacon на входе. Инструмент также работает офлайн после загрузки страницы, поскольку это статический бандл HTML/CSS/JS с библиотеками производителя рядом. Неопубликованные посты, внутренние документы и конфиденциальные README остаются на вашем устройстве.

Безопасна ли панель отрендеренного предпросмотра к XSS?

Да. Каждая HTML-строка, присваиваемая innerHTML, сначала проходит через DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }). DOMPurify — это XSS-санитайзер с открытым исходным кодом, поддерживаемый Cure53; это та же библиотека, которую используют Mozilla MDN, Atlassian и Microsoft 365 для защиты HTML от пользователя. Профиль html по умолчанию удаляет элементы <script>, каждый атрибут-обработчик on* (onerror, onclick и т. д.), URI-схемы javascript: внутри href / src и известные опасные CSS-выражения. Вставка <img src=x onerror=alert(1)> даёт предпросмотр, в котором document.querySelector('#output-preview img[onerror]') возвращает null и alert не срабатывает.

Поддерживаются ли таблицы GFM?

Да. Направление Markdown → HTML обрабатывает таблицы с разделителем | нативно через режим GFM в marked — строка заголовка, разделённая строкой выравнивания |---|---|, и далее строки данных, даёт <table> с <thead> + <tbody>. Зачёркивание (~~text~~ → <del>text</del>) и списки задач (- [ ] / - [x] → <input type="checkbox">) рендерятся так же, как GitHub рендерит их.

Будет ли мой Markdown преобразован без потерь?

Для канонического набора GFM — заголовки h1—h6, упорядоченные и неупорядоченные списки с вложенностью, жирный / курсив / зачёркивание, встроенные ссылки, встроенные изображения, ограждённые блоки кода с языковыми метками, inline-фрагменты кода, таблицы с разделителем |, списки задач, цитаты, горизонтальные линии и автоссылки — вывод HTML стабилен и соответствует рендеру GitHub. Пара поведений, которые стоит знать: сырой inline-HTML внутри Markdown (например, <sub>text</sub>) проходит без изменений в вывод, а setext-заголовки CommonMark (===-подчёркивания) и ATX-заголовки (# Title) оба дают одинаковый <h1>. Это документированное поведение marked, а не баги. Если вам нужно обратное — тянуть отрендеренный HTML обратно в Markdown — используйте инструмент HTML в Markdown.

Поддерживается ли подсветка синтаксиса в ограждённых блоках кода?

Не в v1. Ограждённые блоки кода рендерятся моноширинным шрифтом и тонким фоном, но без подсветки токенов по языкам. Добавление подсветки синтаксиса потребовало бы упаковки Prism или highlight.js, каждая из которых добавляет 15–40 КБ плюс файл грамматики для каждого языка и матрицу тем, которые нужно согласовать с палитрой Workshop Terminal. Пока что рендерер сосредоточен на корректности и XSS-безопасности; если будет запрос на inline-подсветку, опциональный переключатель — реалистичный шаг.

Этот конвертер Markdown в HTML поставляется с marked@12.0.2 и DOMPurify@3.1.7, упакованными с того же источника, поддерживает полный набор возможностей GFM и очищает каждую отрендеренную HTML-строку перед тем, как она коснётся DOM. Без загрузок, без CDN, без телеметрии — каждый байт остаётся в вашем браузере.