Softonic

Конвертер из Markdown в HTML

Шаг 1 / 3
Далее

Поставьте текст в формате Markdown и получите чистый семантический HTML: <h1>–<h6>, <ul>, <ol>, <table>, <pre><code> с выделенной синтаксисом, <blockquote> и URL-адреса с автоматическим ссыланием. Выберите полный документ (с <html>, <head> и минимальным стилевым файлом) или фрагмент (только содержимое тела) в зависимости от того, планируете ли вы интегрировать его в существующую страницу или создать отдельный файл.

Как преобразовать Markdown в HTML

  1. 1

    Вставьте Markdown

    Полный документ или его фрагмент. Front-matter в формате YAML автоматически удаляется при его наличии.

  2. 2

    Выберите набор расширений

    Только CommonMark, GFM (таблицы, списки задач, автолинки) или GFM с математикой.

  3. 3

    Выберите режим вывода

    Фрагмент для вставки или полный HTML-документ с заголовком и минимальным количеством CSS-кода.

  4. 4

    Копируйте или скачивайте HTML

    Сохраните HTML-код в виде текста или в файл формата `.html`.

Таблица соответствий

Markdown HTML
# Heading 1 <h1>Heading 1</h1>
**bold** <strong>bold</strong>
*italic* <em>italic</em>
`code` <code>code</code>
Огороженный код с указанием языка <pre><code class="language-js">
- item <ul><li>item</li></ul>
1. item <ol><li>item</li></ol>
> quote <blockquote><p>quote</p></blockquote>
[text](url) <a href="url">text</a>
![alt](src) <img src="src" alt="alt">
--- <hr>
Таблица GFM <table><thead>...</thead>...
- [x] done <input type="checkbox" checked disabled>

Подсветка синтаксиса

Огороженные блоки кода с указанием языка получают атрибут class="language-xxx" в элементе <code>. Конвертер также встраивает токенизированный вывод highlight.js при включении параметра «предварительная подсветка», это особенно полезно, если на целевой странице не подключается среда выполнения для подсветки.

Полный документ против фрагмента

  • Фрагмент содержит только внутренний код HTML: начните с <h1> или любого другого первого элемента. Вставьте его в существующий блок CMS, тело электронного письма или компонент фронтенда.
  • Полный документ оборачивает фрагмент в <!DOCTYPE html>, <html> и <head> с небольшой таблицей стилей по умолчанию (типографика, блоки кода, таблицы). Сохраните его как .html, документ откроется в любом браузере без дополнительных файлов.

Внутренний и внешний CSS

  • Внутренние стили (переключатель): применяют весь код CSS непосредственно к элементам. Выглядит некрасиво, но это надёжный вариант для шаблонов электронных писем.
  • Классы (по умолчанию) помогают сохранять чистоту HTML; оформление берёт на себя таблица стилей вашего сайта.

Замечания по доступности

  • Заголовки отображаются как семантические <h1>–<h6> с сохранением иерархии; не пропускайте уровни в исходном коде.
  • Изображения без альтернативного текста генерируют <img alt=""> (намеренно пустой alt для декоративных изображений); однако добавляйте альтернативный текст, если изображение не является чисто декоративным.
  • Таблицы получают <thead> для строки заголовка, что улучшает навигацию в программах чтения с экрана.

Часто задаваемые вопросы

Да. Необработанный HTML из исходного кода передаётся без использования тегов скриптов и атрибутов событий. Если вам нужен необработанный результат (вы доверяете входные данные), доступен соответствующий параметр, однако его не следует использовать для контента, предоставленного пользователем.

Списки задач GFM (- [x], - [ ]) превращаются в элементы типа <input type="checkbox" disabled>. Атрибут disabled предотвращает случайные изменения состояния в отображаемом интерфейсе.

Да, включите встроенные стили. Конвертер встраивает минимальный стилевой атрибут в каждый блок, это необходимо клиентам электронной почты (Outlook, Gmail), поскольку они удаляют блоки формата <style>.

Включите математическое расширение и поддержьте отображение блоков $x^2$ или $$...$$ с использованием KaTeX. Конвертер генерирует статический файл в форматах SVG или HTML; для работы не требуется библиотека MathJax во время выполнения.

Нет: обработка текста и генерация HTML-кода выполняются в вашем браузере; исходный код и результаты обработки никогда не покидают ваш устройство.

Сопутствующие инструменты

Смешивание цветов

Смешайте два HEX-цвета в 2-20 равномерных образцов. Каждый промежуточный цвет показывается как HEX-код в верхнем регистре, включая оба края.

Генератор вымышленных телефонных номеров

Создавайте до 50 вымышленных номеров из официально зарезервированных диапазонов пяти стран.

Генератор конфигурации webpack

Создайте webpack.config.js для webpack 5 по короткой форме: задайте entry, папку вывода и режим, затем включите TypeScript, Babel, загрузчик CSS, HtmlWebpackPlugin и сервер разработки.

Генератор бейджей README

Создавайте бейджи shields.io для файлов README на GitHub: статус сборки, версия, лицензия, число загрузок и покрытие кода. Просмотрите и скопируйте фрагмент Markdown.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Генератор случайных адресов

Создавайте 1–20 похожих на адрес записей для макетов и тестов в трёх упрощённых форматах.

Инструмент доступен на других языках