Markdown в HTML

Это преобразует Markdown в HTML, используя CommonMark плюс GitHub Flavored Markdown (GFM); мягкие переводы строк рендерятся как <br>. Можно смотреть отрендеренный предпросмотр или переключиться в режим HTML-исходника, чтобы изучить генерируемые теги. Результат пригоден для вставки в блог-платформы, email-редакторы или куда угодно, где принимают HTML.

Пример

Входной Markdown:

# Release notes

We shipped **three** things this week:

- [x] Faster cold start
- [ ] Dark mode (next week)

See the [docs](https://example.com/docs) for details.

```js
console.log("hello");
```

Отрендеренный HTML-исходник:

<h1>Release notes</h1>
<p>We shipped <strong>three</strong> things this week:</p>
<ul>
<li><input type="checkbox" checked disabled> Faster cold start</li>
<li><input type="checkbox" disabled> Dark mode (next week)</li>
</ul>
<p>See the <a href="https://example.com/docs">docs</a> for details.</p>
<pre><code class="language-js">console.log("hello");
</code></pre>

Частые ошибки и подводные камни

Большинство сюрпризов рендеринга Markdown связаны с небольшим набором синтаксических ловушек. Если превью выглядит неправильно, обычно виной одна из них.

• Нет пустой строки перед списком. "Intro text\n- item" рендерится одним абзацем. Поставьте пустую строку между вступлением и первым элементом списка.
• Отступом сделали блок кода, а хотели абзац. Четыре ведущих пробела превращают любую строку в блок кода. Уберите отступ или явно используйте fenced-блок ```.
• Сломанная таблица. Каждой GFM-таблице нужна строка-разделитель (| --- | --- |) минимум с тремя дефисами на колонку и одинаковое число вертикальных черт на каждой строке.
• Ссылка с пробелами в URL. [click](my page.html) ломает парсер. URL-кодируйте пробел как %20 или используйте угловые скобки: <my page.html>.
• Звёздочки внутри слов. wild*card может рендериться как выделение или нет, в зависимости от окружающего текста. Экранируйте обратным слэшем: wild\*card.
• HTML-экранирование внутри блоков кода. Вставленные сниппеты с &lt; отображаются буквально, потому что уже экранированы. Вставляйте сырой исходник до экранирования.

Какой диалект Markdown поддерживается?

CommonMark плюс GitHub Flavored Markdown (GFM). Это покрывает таблицы, fenced-блоки кода, списки задач, зачёркивание и автолинки URL. Переводы строк внутри абзацев становятся тегами <br>, потому что включена опция breaks — это соответствует тому, как рендерят комментарии GitHub и большинство чатов.

Санитизируется ли HTML в моём Markdown?

Нет. Отрендеренный предпросмотр по умолчанию пропускает сырой HTML. Это сохраняет работоспособность встроенных <details> или <kbd>. Не вставляйте недоверенный Markdown и не копируйте вывод на публичный сайт, не прогнав его через санитайзер вроде DOMPurify.

Поддерживаются ли сноски, математика или диаграммы?

Нет. Это обычный GFM. Сноски, математика (KaTeX/MathJax) и диаграммы Mermaid — расширения GitHub или платформ, здесь они не рендерятся. Если нужно — используйте рендерер Markdown с соответствующими плагинами или вставьте вывод в платформу, которая их рендерит.

Что происходит при клике «Копировать HTML»?

Отрендеренный HTML-исходник отправляется в буфер через Clipboard API. Вы получаете HTML без обёртки страницы — только теги, представляющие ваш Markdown. Вставляйте в CMS, email-редактор или прямо в файл. На диске ничего не создаётся.

Почему мои таблицы выглядят смещёнными?

GFM-таблицам нужна строка-заголовок, строка-разделитель минимум с тремя дефисами на колонку и вертикальные черты между ячейками. Недостающая черта или разделитель только из двух дефисов тихо ломают всё. Переключитесь в режим HTML-исходника, чтобы увидеть, действительно ли получился <table>.

Сохраняете ли вы Markdown, который я сюда вставляю?

Нет. Мы не сохраняем введённый или вставленный Markdown и не храним отрендеренный HTML, который вы скачиваете. Всё удаляется, как только вы закроете или обновите вкладку — никаких логов, никакой записи у нас о том, что вы написали. Можете заглянуть в DevTools браузера, если хотите.