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-кода выполняются в вашем браузере; исходный код и результаты обработки никогда не покидают ваш устройство.

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

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Конвертер CMYK в RGB

Преобразуйте проценты CMYK в приблизительные значения RGB и Hex для быстрого экранного предпросмотра по стандартной формуле.

Шпаргалка по Markdown

Практический справочник Markdown с настоящим предпросмотром и готовыми для копирования примерами заголовков, списков, таблиц, кода, ссылок, изображений и синтаксиса GFM.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

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