Типичные причины перейти от HTML к Markdown
HTML — это то, в чём контент публикуют; Markdown — то, в чём его во многом пишут и хранят. Конвертация между ними нужна при переносе блога с WordPress или другой CMS на генератор статических сайтов вроде Hugo, Jekyll или Astro, при переносе документации со старой страницы интранета в вики на основе Git, при сохранении статьи в приложение для заметок вроде Obsidian или при подготовке веб-контента как чистых входных данных для скрипта или поискового индекса. Markdown сохраняет значимую структуру — заголовки, выделение, ссылки и списки — и отбрасывает оформительскую разметку, из-за которой HTML трудно читать и править.
Во что превращается каждый элемент
Конвертация идёт прямо по мере ввода и следует фиксированному набору соглашений, подобранных под ожидания большинства инструментов для Markdown:
<h1>–<h6>становятся заголовками#–######.<strong>и<b>становятся**полужирным**;<em>и<i>—_курсивом_.<a href>становится[текст](url)с сохранением атрибутаtitle, если он есть. Ссылки безhrefстановятся обычным текстом.<img>становится. Сам файл изображения не затрагивается, поэтому ссылка ведёт туда же, куда вёл исходныйsrc.- В списках
<ul>маркером служит-, а списки<ol>нумеруются. <pre><code>становится блоком кода между тройными обратными апострофами. Класс вродеlanguage-pythonу элемента code сохраняется как метка языка блока, так что подсветка синтаксиса продолжает работать.<blockquote>превращается в строки, начинающиеся с>, а<hr>— в* * *.<br>становится двумя пробелами в конце строки и переносом — так в Markdown записывается жёсткий перенос.
Элементы, не имеющие смысла в Markdown, такие как <div>, <span> и <section>, разворачиваются: текст остаётся, теги уходят. <script>, <style>, <noscript> и <iframe> удаляются вместе со всем содержимым — это избавляет от кода трекеров, встроенных виджетов и инлайн-CSS.
Символы, перед которыми появляется обратная косая черта
В результате можно заметить обратные косые черты, которых на странице не было, например 1\. Введение или \*важно\*. Это экранирование, и оно правильное. Если абзац в HTML начинается с «1.» и пробела, то без экранирования в Markdown он превратился бы в нумерованный список. Буквальные звёздочки, подчёркивания, квадратные скобки и # в начале строки экранируются по той же причине — чтобы отрендеренный Markdown показывал ровно тот текст, что показывал HTML.
Как получить чистый результат из целой веб-страницы
Конвертер не угадывает, какая часть страницы является статьёй. Меню навигации, баннеры о cookie, боковые панели и подвалы — это обычный HTML-текст, поэтому вставка исходного кода всей страницы притащит их все. Для чистого результата передавайте только нужное содержимое:
- Откройте страницу в браузере, щёлкните правой кнопкой по первой строке статьи и выберите «Просмотреть код».
- В инструментах разработчика найдите элемент, который оборачивает всю статью, — часто это
<article>или<main>. - Щёлкните по нему правой кнопкой, выберите «Копировать», затем «Копировать outerHTML» и вставьте результат сюда.
Ещё несколько моментов, о которых стоит помнить:
- Относительные ссылки остаются относительными. Ссылка вроде
/blog/post-2или изображениеsrc="img/photo.jpg"конвертируются как написаны. Если Markdown будет жить на другом сайте, замените их полными URL. - HTML из писем конвертируется плохо. Рассылки собраны из вложенных таблиц вёрстки, а каждая
<table>превращается в таблицу Markdown. В итоге получается одна таблица, в ячейки которой втиснуты целые разделы текста. Копируйте внутреннее содержимое одной ячейки, а не всё письмо. - Таблицы — только текст. Каждая ячейка сводится к простому тексту, поэтому ссылки и форматирование внутри ячеек теряются, а первая строка всегда становится строкой заголовка.
- HTML-комментарии отбрасываются.
Проверка результата
Быстрее всего проверить конвертацию, отрендерив её обратно. Вставьте Markdown в Markdown в HTML и посмотрите на превью: заголовки, списки и блоки кода должны совпадать со структурой исходной страницы. Если вы конвертируете не веб-страницу, а файл Word, воспользуйтесь инструментом DOCX в Markdown: он применяет те же правила, но читает .docx напрямую. Ничего из вставленного сюда не загружается на сервер — HTML разбирается и конвертируется вашим браузером.