IT Market
Инструменты/Код/Документы/Markdown в HTML онлайн — конвертер с превью
MD → HTML

Конвертируйте Markdown в HTML

Коротко об инструменте

Markdown в HTML онлайн — конвертер с превью

Текст написан в Markdown, а вставить его нужно туда, где Markdown не понимают: в поле визуального редактора CMS, в шаблон письма, в описание товара или в статическую страницу. Вставьте текст в «Markdown на входе», где подсказка уже показывает «# Hello World» и «**Bold text**», и нажмите «Конвертировать». Готовые теги окажутся в «HTML на выходе», а блок «Предпросмотр» тут же покажет, как это выглядит. Разбор делает marked.js на вашей вкладке. Смотрите также: собрать Markdown из готовой HTML-страницы, сохранить ту же заметку в PDF, подготовить полученный HTML к вставке в React.

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

  1. Вставьте текст в поле «Markdown на входе», заменив пример из подсказки со строкой «# Hello World».
  2. Нажмите «Конвертировать» — marked.js разберёт разметку и заполнит поля вывода.
  3. Сверьте блок «Предпросмотр» с тем, что вы задумали: заголовки, списки и ссылки видно сразу.
  4. Заберите теги из поля «HTML на выходе» кнопкой «Копировать HTML» или сохраните их кнопкой «Скачать HTML».
  5. Перед публикацией на сайте вычистите результат, если исходный Markdown прислал посторонний человек.

Вопросы и ответы

Какой диалект Markdown понимает конвертер — работают ли таблицы и блоки кода?

Разбор ведёт marked.js, а она поддерживает GitHub Flavored Markdown: таблицы на вертикальных чертах, ограждённые тройными обратными кавычками блоки кода, зачёркнутый текст и списки задач. Экзотика вроде сносок или подсветки синтаксиса в вывод не попадёт — за подсветку в готовом HTML отвечает уже сторонняя библиотека на вашей странице.

Почему после конвертации HTML-код так и не появился?

Скорее всего не загрузилась сама библиотека: marked.js подтягивается с внешнего CDN при открытии страницы. Если сеть отвалилась, блокировщик вырезал скрипт или страница открыта офлайн, разбирать разметку нечем. Обновите вкладку при живом интернете и отключите блокировщик для этого адреса — после загрузки библиотеки конвертация снова заработает.

Безопасно ли вставлять полученный HTML прямо на сайт?

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

Сохраняются ли переносы строк внутри абзаца?

Одиночный перевод строки в Markdown переносом не считается: две соседние строки склеятся в один абзац. Чтобы получить br, поставьте в конце строки два пробела или разделите куски пустой строкой — тогда получатся отдельные абзацы p. Это поведение самого формата, а не особенность страницы.

Чем это отличается от обратного конвертера HTML в Markdown?

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

Виден ли вставленный текст кому-то, кроме меня?

Нет. Библиотека скачивается с CDN один раз, а сам разбор идёт на вашей вкладке — черновик не отправляется ни на наш сервер, ни куда-либо ещё, и нигде не сохраняется. Единственный сетевой запрос при работе страницы касается файла marked.min.js, а не вашего текста.

Можно ли открыть страницу с телефона и скопировать оттуда HTML?

Да, поля и кнопки на узком экране работают так же, а превью просто становится ниже. Кнопка копирования кладёт код в системный буфер телефона, откуда он вставляется в мессенджер или в мобильный редактор. Скачивание HTML тоже доступно, но на iOS файл уедет в «Файлы», а не в галерею — искать его нужно там.

Примеры

Заметка из редактора в письмо
До: ### Итоги недели Закрыто **12** задач.
После: Итоги недели Закрыто 12 задач.
Ссылка и цитата в описании релиза
До: > Релиз 2.1 См. [changelog](https://example.com/log)
После: Релиз 2.1 См. changelog