tooly

Конвертировать Markdown в HTML онлайн

Вставьте Markdown из GitHub, Obsidian или Notion и получите стандартный HTML — с живым предпросмотром, чтобы проверить таблицы и блоки кода перед копированием.

Всё работает в браузере — данные никуда не отправляются

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

  1. 1

    Вставьте Markdown в поле.

  2. 2

    Переключайтесь между исходным HTML и отрендеренным предпросмотром.

  3. 3

    Скопируйте HTML или скачайте как файл .html.

Куда попадает HTML

На Markdown приятно писать, но многие места принимают только HTML: режим исходного кода в редакторе CMS, шаблон письма, поле описания товара в интернет-магазине, портал документации без поддержки Markdown или статическая страница, которую вы собираете вручную. Конвертация здесь даёт разметку, которую можно вставить в любое из этих мест, а предпросмотр позволяет проверить результат до публикации.

Конвертация использует диалект GitHub Flavored Markdown, поэтому текст, написанный для README, описания pull request или приложения для заметок вроде Obsidian, ведёт себя здесь так же, как там.

Как выглядит результат

Конвертер выдаёт фрагмент body: сами элементы, без <html>, <head> и стилей. Прежде чем куда-то его вставлять, стоит знать несколько деталей:

  • У заголовков нет атрибутов id. ## Цены превращается в <h2>Цены</h2>. Если для оглавления нужны якорные ссылки, добавьте id сами.
  • Блоки кода несут класс языка. Блок, открытый `python , даёт <pre><code class="language-python">, и подсветчики вроде Prism и highlight.js подхватывают его автоматически. Символы вроде < и & внутри кода экранируются.
  • Списки задач превращаются в элементы списка с неактивными флажками — так же, как их отображает GitHub.
  • Таблицы становятся обычной разметкой <table> с <thead> и <tbody>. Выравнивание столбцов, заданное двоеточиями в строке-разделителе, записывается атрибутом align.
  • Стили не включаются. Предпросмотр применяет лёгкую таблицу стилей, чтобы текст было удобно читать, но скопированный HTML наследует тот CSS, который есть на целевой странице.

При скачивании фрагмент оборачивается в минимальную самостоятельную страницу: документ <!doctype html> с <meta charset="utf-8"> и <title>, взятым из первого заголовка, чтобы буквы с диакритикой и другой текст за пределами ASCII корректно отображались при открытии файла с диска. Стили не добавляются, поэтому страница использует оформление браузера по умолчанию.

Переносы строк и другие сюрпризы

Большая часть путаницы с Markdown происходит из горстки правил, которые отличаются от текстового редактора:

  • Одиночный перенос строки — это не новая строка. Две строки, написанные одна под другой, сливаются в один абзац. Чтобы начать новый абзац, оставьте пустую строку, а чтобы принудительно вставить <br>, закончите строку двумя пробелами или обратной косой чертой. Некоторые редакторы, включая комментарии на GitHub, воспринимают одиночные переносы как разрывы строк; этот конвертер следует стандартному поведению, принятому в README-файлах на GitHub и большинстве генераторов статических сайтов.
  • Front matter не распознаётся. YAML-блок между строками --- в начале файла отображается как горизонтальная линия с текстом после неё, а закрывающий --- может превратить строку над ним в заголовок. Удалите front matter перед конвертацией.
  • Сноски, формулы и диаграммы не входят в диалект. $x^2$ остаётся буквальным текстом, а блок Mermaid становится обычным блоком кода. Синтаксис сносок не просто игнорируется, а ведёт себя хуже: определение вида [^1]: note читается как ссылка-сноска на URL, так что маркер превращается в ссылку на слово note.
  • Кавычки остаются прямыми. Типографские кавычки и тире не подставляются: что напечатали, то и получите.
  • Нумерованный список, начинающийся не с 1, не может идти сразу под абзацем. Строки вроде 3. three поглощаются текстом абзаца, если их не отделяет пустая строка. У маркированных списков и списков, начинающихся с 1, такой проблемы нет.

Сырой HTML и безопасность

Markdown допускает сырой HTML, и этот конвертер пропускает его без изменений. Блок <details> или <span style>, написанный вручную, появится в результате ровно в том виде, в каком написан. Это полезно, но означает и то, что результат не санитизируется: тег <script> или атрибут onerror в исходнике окажутся в скопированном HTML.

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

Связанные конвертации

Чтобы пройти обратный путь — от веб-страницы или экспорта CMS к Markdown, — используйте HTML в Markdown. Для документов Word инструмент DOCX в Markdown выдаёт Markdown, который затем можно просмотреть и сконвертировать здесь. Всё работает в браузере по мере ввода, поэтому черновики и внутренняя документация никогда не отправляются на сервер.

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

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

GitHub Flavored Markdown: таблицы, списки задач, зачёркивание, блоки кода с оградкой и автоссылки — поверх CommonMark.

HTML — это полная страница?

Показываемый и копируемый результат — фрагмент body, готовый для вставки в CMS или шаблон. При скачивании он оборачивается в минимальный документ HTML5 с кодировкой UTF-8 и заголовком из первого заголовка текста.

Мой текст загружается на сервер?

Нет. Конвертация и предпросмотр выполняются в браузере.

Можно конвертировать HTML обратно в Markdown?

Да, с помощью отдельного инструмента «Конвертировать HTML в Markdown онлайн» — он превращает вставленный HTML или сохранённую веб-страницу обратно в чистый Markdown.

Скрипты в предпросмотре выполняются?

Нет. Предпросмотр в песочнице: сырой HTML из Markdown отображается, но не может выполнять скрипты.

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