Конвертер HTML у Markdown — конвертуйте HTML у Markdown онлайн _

Що таке конвертація HTML у Markdown?

HTML — це відрендерована розмітка, яку відображає браузер: <h1>, <ul>, <table>, <a> та інше. Markdown — це легкий формат простого тексту, що використовує мінімальну пунктуацію (# для заголовків, * для курсиву, - для елементів списку) для кодування тієї самої структури. GitHub Flavored Markdown (GFM) розширює оригінальну специфікацію CommonMark таблицями, закресленням, списками завдань та автопосиланнями. Конвертація HTML у Markdown повертає відрендерений або експортований HTML назад у редагований простий текст — саме те, що потрібно для міграції контенту з CMS або прибирання README.

Які можливості GitHub Flavored Markdown підтримує вивід?

Вбудований рушій turndown@7.2.0 з розширенням turndown-plugin-gfm генерує повне надмножина GFM з вашого HTML: заголовки у стилі ATX від # до ###### з <h1>–<h6>, упорядковані та неупорядковані списки з вкладенням, жирний **text** та курсив *text*, закреслення ~~text~~ з <del>, вбудовані посилання [text](url) та зображення ![alt](src), огороджені блоки коду з підказками мови (```js), вбудовані спани коду `code`, pipe-таблиці з <table>, GFM-списки завдань - [ ] / - [x] з checkbox-полів, цитати > та горизонтальні лінії ---. Панель перегляду повторно рендерить згенерований Markdown за допомогою marked@12.0.2, щоб ви могли візуально підтвердити результат конвертації.

Як працює конвертація HTML у Markdown?

Кожне перетворення виконується локально у вашому браузері за допомогою трьох вбудованих бібліотек — без CDN, без fetch, без телеметрії. Основні кроки:

1. Очищення: вставлений HTML спочатку пропускається через DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) для видалення елементів <script>, всіх обробників подій on* та URI javascript: перед тим, як щось обходить розмітку. DOMPurify — той самий XSS-санітайзер, що використовується Mozilla MDN, Atlassian та Microsoft 365.
2. Конвертація: turndownService.turndown обходить очищений DOM і генерує GitHub Flavored Markdown — заголовки стають префіксами #, списки стають елементами - / 1., <table> стає pipe-таблицею і т. д. Markdown записується у вихідний <textarea> лише для читання через value (ніколи через innerHTML), що є вродженно безпечним.
3. Рендеринг: згенерований Markdown повторно розбирається через marked.parse, знову очищується через DOMPurify і призначається innerHTML панелі перегляду, щоб ви отримали візуальне підтвердження: Markdown round-trip відповідає очікуваній структурі. Живий режим відкладає введення на 150 мс, щоб вивід оновлювався під час вставки без зайвого навантаження на парсер.

Чому варто конвертувати HTML у Markdown цим інструментом?

• Конфіденційність: кожен прохід очищення, конвертації та рендерингу відбувається у вашому браузері. HTML — включаючи експортовані CMS-публікації, внутрішню документацію та конфіденційний вихідний код сторінок — ніколи не потрапляє на наші сервери.
• XSS-безпечний за замовчуванням: вставлений HTML проходить через DOMPurify перед тим, як turndown його обходить, а панель перегляду знову запускає відрендерений HTML через DOMPurify перед innerHTML, тому вставка розмітки з тегами <script> або обробниками onerror= дає неактивний перегляд і чистий Markdown.
• Повна підтримка GFM: елементи <table> конвертуються у Markdown pipe-таблиці, <del> у закреслення, а checkbox-списки у GFM-списки завдань. Більшість онлайн-конвертерів втрачають таблиці на шляху HTML → Markdown — вбудоване розширення turndown-plugin-gfm їх зберігає.

Які поширені застосування конвертації HTML у Markdown?

Конвертація HTML у Markdown з'являється при міграції контенту, документуванні та архівуванні:

• Міграція CMS: експорт поста WordPress або Ghost як HTML та конвертація у Markdown для перебудови статичного сайту на Hugo / Jekyll / 11ty / Astro. Конвертація зберігає рівні заголовків, посилання, списки та вбудований акцент.
• Прибирання README: вставка відрендереного HTML зі сторінки вікі або веб-статті та повернення у редагований Markdown для проєктного README або сайту документації — замість повторного набору структури вручну.
• Архівування та нотатки: захоплення HTML-листа або веб-кліпу та конвертація у Markdown для зберігання в Obsidian, Notion або базі знань у форматі простого тексту — Markdown залишається зручним для diff та переживає зміни форматів.

Як виглядає приклад конвертації HTML у Markdown?

Вставка <h2>Heading</h2><ul><li>a</li><li>b<ul><li>nested</li></ul></li></ul> дає Markdown з ## Heading, вкладеним маркованим списком та панель перегляду, що повторно рендерить ту саму вкладену структуру. Вставка <table> з рядком заголовка та двома рядками даних дає еквівалентну pipe-таблицю | col | col | — підтверджуючи, що конвертація зберігає заголовки, списки та таблиці.

Чи цей конвертер HTML у Markdown працює повністю у моєму браузері?

Так. Кожен прохід очищення, конвертації та рендерингу виконується локально як JavaScript у вашій вкладці браузера. Три вбудовані бібліотеки — turndown@7.2.0 (з turndown-plugin-gfm@1.0.2), marked@12.0.2 та DOMPurify@3.1.7 — постачаються з того самого джерела, що й сторінка, тому без CDN-залежності, без fetch, без XMLHttpRequest, без navigator.sendBeacon на введенні. Інструмент також працює офлайн після завантаження сторінки. Експортовані публікації, внутрішні документи та конфіденційний вихідний код сторінок залишаються на вашому пристрої.

Чи є панель відрендереного перегляду XSS-безпечною?

Так. Кожен HTML-рядок, присвоюваний innerHTML, спочатку проходить через DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }). DOMPurify — це відкритий XSS-санітайзер, підтримуваний Cure53; це та сама бібліотека, що використовується Mozilla MDN, Atlassian та Microsoft 365 для захисту HTML від користувача. Стандартний профіль html видаляє елементи <script>, кожен атрибут обробника подій on* (onerror, onclick тощо), схеми URI javascript: всередині href / src. Вставка <img src=x onerror=alert(1)> дає перегляд, де document.querySelector('#output-preview img[onerror]') повертає null і жодного сповіщення не з'являється.

Чи конвертуються GFM-таблиці з HTML?

Так. Напрямок HTML → Markdown використовує turndown-plugin-gfm, який додає власне правило turndown, що обходить вузли <table> та виводить еквівалентний Markdown у вигляді pipe-таблиці — рядок заголовка, рядок вирівнювання |---|---|, потім рядки даних. Більшість онлайн-конвертерів втрачають таблиці на цьому шляху; цей зберігає. Закреслення (<del>text</del> → ~~text~~) та списки завдань (<input type="checkbox"> → - [ ] / - [x]) конвертуються так само.

Чи мій HTML конвертується чисто?

Для канонічного набору можливостей GFM — заголовки від h1 до h6, упорядковані та неупорядковані списки з вкладенням, жирний / курсив / закреслення, вбудовані посилання, вбудовані зображення, огороджені блоки коду з тегами мови, вбудовані спани коду, pipe-таблиці, списки завдань, цитати, горизонтальні лінії та автопосилання — конвертація чиста і передбачувана. Граничні випадки: HTML-коментарі (<!-- ... -->) видаляються (Markdown не має синтаксису коментарів); inline-стилі та атрибути class відкидаються, бо Markdown не має їх еквівалентів; рідкісні inline-теги на кшталт <sub> / <sup> перетворюються на простий текст. Це задокументована поведінка turndown, а не помилки.

Чи підтримується підсвічування синтаксису в огороджених блоках коду?

Не у v1. Огороджені блоки коду рендеряться моноширинним шрифтом і злегка виділеним фоном, але без посимвольного підсвічування для кожної мови. Додавання підсвічування синтаксису потребувало б вбудування Prism або highlight.js, кожна з яких додає 15–40 КБ плюс файл граматики на мову та матрицю тем. Наразі рендерер зосереджений на коректності та XSS-безпеці; якщо буде попит на вбудоване підсвічування, опціональний перемикач є здійсненним подальшим розвитком.

Цей конвертер HTML у Markdown постачається з turndown@7.2.0 (+ turndown-plugin-gfm@1.0.2), marked@12.0.2 та DOMPurify@3.1.7, вбудованими у той самий ресурс, генерує повний набір можливостей GFM та очищує кожен відрендерений HTML-рядок перед торканням DOM. Без завантаження, без CDN, без телеметрії — кожен байт залишається у вашому браузері.