Предпросмотр Markdown и преобразование в HTML

Напишите или вставьте Markdown — предпросмотр обновляется по мере ввода. HTML можно скопировать или скачать файлом.

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

Здесь появится предпросмотр.

Работает полностью в браузере. Введённые данные не отправляются и не сохраняются.

Как пользоваться

  1. Введите или вставьте Markdown в левое поле.
  2. Проверьте результат справа: он обновляется при вводе.
  3. Нажмите «Копировать HTML» или «Скачать HTML».

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

Для рендеринга используется markdown-it 12.3.2 с включёнными HTML, переносами строк и автоссылками, а также плагин markdown-it-emoji. Поскольку переносы включены, одно нажатие Enter даёт <br>; строгий CommonMark и многие сайты склеили бы такие строки в один абзац, поэтому результат может отличаться от площадки, где вы публикуете текст. Блоки кода раскрашивает highlight.js 11.4.0 с 34 распространёнными языками; код на других языках остаётся без подсветки.

Перед показом и копированием всё проходит через DOMPurify 3.2.6, поэтому скрипты и атрибуты событий из вставленного HTML удаляются. Скачиваемый файл — фрагмент HTML без стилей, его удобно вставить в страницу со своим CSS. Преобразование выполняется в браузере, текст никуда не загружается, но изображения по URL браузер, как и на любой странице, загружает с их серверов.

Частые вопросы

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

CommonMark через markdown-it, а также таблицы, зачёркивание (~~текст~~), коды эмодзи вроде :smile: и автоссылки для URL. Одиночный перенос строки становится <br>.

Можно ли писать HTML внутри Markdown?

Да. HTML разрешён, но результат очищается DOMPurify: теги <script>, атрибуты событий on… и ссылки javascript: удаляются, поэтому ничего из текста не выполнится.

Подсвечивается ли код?

Да. Блоки кода в ограждении раскрашиваются highlight.js. Укажите язык после обратных кавычек (```js) или доверьте автоопределению.

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