Markdown в HTML и обратно: конвертер с живым предпросмотром
Вставьте Markdown — увидите готовую страницу и чистый HTML рядом. Вставьте HTML — получите Markdown, пригодный для README или статьи в блоге. Оба направления работают в вашем браузере: текст никуда не отправляется и нигде не сохраняется.
.md — файл читается локально. Поддержан CommonMark в типичном объёме плюс расширения GFM: таблицы, зачёркивание, списки задач.
Вставьте Markdown выше — HTML появится здесь.
.html — файл читается локально. Разбор идёт через DOMParser, поэтому работает и с фрагментом, и с целой страницей.
Вставьте HTML выше — Markdown появится здесь.
Текст не покидает ваш браузер — преобразование выполняется локально, без отправки на сервер.
Что именно поддержано
Со стороны Markdown — CommonMark в типичном объёме плюс расширения GFM: заголовки решётками и подчёркиванием, абзацы, горизонтальные линии; списки маркированные, нумерованные и вложенные, с плотным и разреженным оформлением; списки задач в квадратных скобках; цитаты, в том числе с ленивым продолжением строки; код в ограде с названием языка и код отступом; таблицы GFM с выравниванием колонок; ссылки, изображения, автоссылки, ссылки на определения внизу документа; жирный, курсив, зачёркивание, код в строке, экранированные символы, жёсткий перенос. Со стороны HTML разбор идёт через DOMParser самого браузера, поэтому работает и фрагмент, и целая страница с head. Таблицы с объединёнными ячейками в Markdown не переносятся — такого синтаксиса там нет, поэтому они остаются тегами, и инструмент об этом говорит. Чего сознательно нет: подсветки синтаксиса в блоках кода, сносок, формул и директив конкретных генераторов статики. Это уже не Markdown, а диалект отдельного инструмента.
Один перенос строки: два разных Markdown
Чаще всего источник расхождений между конвертерами — именно одиночный перенос внутри абзаца. По CommonMark это обычный пробел: две строки склеиваются в один абзац. Так ведут себя Pandoc, генераторы документации и большинство статических сайтов. GitHub в комментариях, описаниях задач и рецензиях делает наоборот: каждый перенос становится тегом br. Именно поэтому текст, который хорошо выглядел в задаче, после переноса в README слипается в сплошной абзац. Флажок «Одиночный перенос строки — это br» переключает между этими двумя привычками. По умолчанию действует правило CommonMark.
Почему предпросмотр показывает не всё, что есть в HTML
Markdown по спецификации разрешает HTML внутри себя. Это удобно и одновременно означает, что любой вставленный текст может содержать исполняемый код. Популярные онлайн-просмотрщики кладут результат в innerHTML как есть. Библиотека marked, на которой они построены, с четвёртой версии не имеет встроенной санитизации вообще — тег script из чужого Markdown там просто выполнится. Здесь предпросмотр строится узлами DOM по белому списку: script, iframe, object, обработчики событий вида onclick и ссылки со схемой javascript: в него не попадают, а список вырезанного показывается под результатом. Во вкладке «HTML-код» вы видите полный вывод без урезаний — это текст, а не страница, и выполнить его невозможно. Попасть в предпросмотр HTML из источника может только тогда, когда вы сами включили соответствующий флажок. По умолчанию теги экранируются и показываются как текст.