Как пользоваться: Markdown в HTML
- Введите, вставьте или откройте файл
.mdв панели Markdown. Также можно нажать Sample, чтобы увидеть все поддерживаемые элементы. - Проверьте отображение в разделе Preview, затем переключитесь на HTML, чтобы увидеть сгенерированную разметку.
- Включайте или отключайте параметры: GitHub-flavored Markdown, переносы строк, ID заголовков или полный HTML-документ.
- Нажмите Copy HTML, чтобы вставить код в CMS или шаблон, либо Download, чтобы сохранить файл
.html.
Что такое конвертер Markdown в HTML?
Markdown — это облегчённый текстовый синтаксис для форматирования: # для заголовков, **жирный**, - для списков и обратные кавычки для кода. Браузеры не умеют отображать его напрямую, поэтому сначала его нужно преобразовать в HTML. Этот конвертер делает это прямо в браузере с помощью парсера marked и показывает результат рядом с исходным текстом. Это удобно для файлов README, документации, постов в блогах, написанных в Markdown, и контента, который нужно вставить в CMS, принимающую только HTML.
Поддерживаемый синтаксис
| Markdown | Результат HTML |
|---|---|
## Setup | <h2 id="setup">Setup</h2> |
**bold**, _italic_ | <strong>, <em> |
[link](/docs) | <a href="/docs">link</a> |
- [x] Done (GFM) | <li><input type="checkbox" checked disabled> Done</li> |
~~old~~ (GFM) | <del>old</del> |
| ```js fence | <pre><code class="language-js"> |
GitHub-flavored Markdown (GFM) добавляет табличный синтаксис с выравниванием столбцов (|:---|:---:|---:|), списки задач, зачёркивание и автоматическое создание ссылок из URL-адресов. Блоки кода сохраняют язык в виде класса language-*, который подхватывают подсветчики синтаксиса, например Prism или highlight.js.
Безопасен ли созданный HTML?
Markdown допускает вставку сырого HTML, поэтому документ может содержать теги <script>, обработчики onerror= или ссылки javascript:. Перед показом предпросмотр всегда очищается с помощью DOMPurify, а по умолчанию HTML-результат очищается так же. Если вы конвертируете Markdown, отправленный пользователями на вашем сайте, очищайте его и на сервере: очистка в браузере защищает только эту страницу.
Пояснение к параметрам
- Переносы строк становятся <br>: стандартный Markdown объединяет строки внутри абзаца, а комментарии на GitHub считают каждый перенос строки разрывом. Включите этот параметр, чтобы поведение совпадало с комментариями.
- ID заголовков: добавляет атрибуты
idв стиле GitHub (строчные буквы, дефисы, при повторах добавляются-1,-2), чтобы можно было ссылаться на#installationили создать оглавление. - Полный HTML-документ: оборачивает результат в
<!doctype html>,<head>и<body>, используя первый заголовок как<title>.
Советы
Оставляйте пустую строку перед списками, таблицами и блоками кода. Многие проблемы вида «почему это не отображается?» возникают из-за пропущенной пустой строки. Нужно сделать обратное преобразование? Воспользуйтесь конвертером HTML в Markdown, а результат приведите в порядок с помощью форматировщика HTML.
Также ищут как: md в html, markdown конвертер, markdown предпросмотр, markdown редактор, gfm markdown, перевести md в html.
Инструменты, которые хорошо сочетаются с Markdown в HTML
- Markdown в Webflow Rich Text — Вставьте Markdown, проверьте предпросмотр и скопируйте его как форматированный текст.
- HTML-сущности — Экранируйте < > & ", чтобы текст безопасно отображался в HTML, преобразуйте акценты и символы в именованные или числовые сущности либо декодируйте HTML с сущностями обратно в обычный текст.
- Счётчик слов — Вставьте или напишите текст, чтобы сразу увидеть количество слов и символов, а также время чтения и произнесения, плотность ключевых слов и проверку длины для SEO-заголовков, мета-описаний и постов в соцсетях.
- Сравнение текстов — Вставьте исходную и изменённую версии, чтобы увидеть добавленные, удалённые и изменённые строки рядом — с подсветкой точно изменённых слов внутри каждой строки.
Часто задаваемые вопросы
Можно ли вставить Markdown в Webflow?
Загружается ли мой Markdown куда-либо?
Поддерживается ли GitHub-flavored Markdown?
- [ ] / - [x]), зачёркивание с помощью ~~ и автоматические ссылки. Используется спецификация GFM, как на GitHub.Почему пропадает перенос строки?
<br>, завершите строку двумя пробелами или обратной косой чертой либо включите параметр «Переносы строк становятся <br>».Можно ли использовать сырой HTML внутри Markdown?
<details>, <kbd> или <sup>, сохраняются. Скрипты, обработчики событий и URL javascript: удаляются, если только вы не отключили очистку результата.Добавляется ли подсветка синтаксиса в блоки кода?
<pre><code class="language-xyz">. Такой формат ожидают highlight.js и Prism. Подключите одну из этих библиотек на свою страницу, чтобы раскрасить код.