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

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

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

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

Вбудований парсер marked@12.0.2 підтримує повне надмножина GFM: заголовки у стилі ATX від # до ######, упорядковані та неупорядковані списки з вкладенням, жирний **text** та курсив *text*, закреслення ~~text~~, вбудовані посилання [text](url) та вбудовані зображення ![alt](src), огороджені блоки коду з опціональними тегами мови (```js), вбудовані спани коду `code`, pipe-таблиці з рядком заголовка, GFM-списки завдань - [ ] / - [x], цитати >, горизонтальні лінії --- та автопосилання. Кожен елемент рендериться у панелі перегляду так само, як GitHub рендерить його.

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

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

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

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

• Конфіденційність: кожен прохід розбору, очищення та рендерингу відбувається у вашому браузері. Markdown — включаючи нерелізні пости блогу, чорновики внутрішньої документації та конфіденційний вміст README — ніколи не потрапляє на наші сервери.
• XSS-безпечний за замовчуванням: панель відрендереного перегляду пропускає кожен HTML-рядок через DOMPurify перед innerHTML, тому випадковий тег <script> або обробник onerror= у сирому HTML у вашому Markdown дає неактивний перегляд. Сира вкладка показує неочищений вивід для огляду — він знаходиться всередині <textarea> через value і ніколи не виконується.
• Повна підтримка GFM: таблиці, закреслення, списки завдань та автопосилання рендеряться так само, як GitHub рендерить їх. Markdown pipe-таблиця стає HTML <table> з <thead> та <tbody> — без втрачених рядків, без вирівняної структури.

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

Перетворення Markdown на HTML трапляється у документуванні, роботі зі статичними сайтами та підготовці листів:

• Авторинг README на GitHub: написання README проєкту локально у Markdown та попередній перегляд відрендереного HTML перед пуш-командою. Перегляд відповідає GFM-рендереру GitHub для таблиць, списків завдань та огородженого коду.
• Контент статичного сайту: вставка поста Markdown і отримання HTML для поля CMS або шаблонізатора, що очікує розмітку замість Markdown-джерела.
• Шаблони листів: написання тіла транзакційного листа як Markdown та конвертація у HTML для шаблонізатора постачальника поштових сервісів. Вивід є простим семантичним HTML — без вбудованих стилів, без шарів особливостей поштових клієнтів.

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

Вставте # Title\n\n- item 1\n- item 2\n\n[link](https://example.com) — отримаєте панель перегляду з <h1>Title</h1>, двоелементним неупорядкованим списком та <a href="https://example.com">link</a>. Сира вкладка показує точний HTML-рядок, щоб ви могли скопіювати його прямо в шаблон. Pipe-таблиця з рядком вирівнювання |---|---| стає повноцінним <table> з <thead> та <tbody> — підтверджуючи, що GFM-таблиці рендеряться так само, як GitHub рендерить їх.

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

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

Чи є панель відрендереного перегляду 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 та відомі небезпечні CSS-вирази. Вставка <img src=x onerror=alert(1)> дає перегляд, де document.querySelector('#output-preview img[onerror]') повертає null і жодного сповіщення не з'являється.

Чи підтримуються GFM-таблиці?

Так. Напрямок Markdown → HTML обробляє pipe-таблиці нативно через GFM-режим marked — рядок заголовка, розділений рядком вирівнювання |---|---|, з наступними рядками даних, генерує <table> з <thead> + <tbody>. Закреслення (~~text~~ → <del>text</del>) та списки завдань (- [ ] / - [x] → <input type="checkbox">) рендеряться так само, як GitHub рендерить їх.

Чи мій Markdown конвертується без втрат?

Для канонічного набору можливостей GFM — заголовки від h1 до h6, упорядковані та неупорядковані списки з вкладенням, жирний / курсив / закреслення, вбудовані посилання, вбудовані зображення, огороджені блоки коду з тегами мови, вбудовані спани коду, pipe-таблиці, списки завдань, цитати, горизонтальні лінії та автопосилання — HTML-вивід стабільний і відповідає рендереру GitHub. Кілька поведінок, які варто знати: сирий вбудований HTML всередині Markdown (наприклад, <sub>text</sub>) проходить незмінним до виводу, а заголовки setext CommonMark (підкреслення ===) та заголовки ATX (# Title) обидва генерують однаковий <h1>. Це задокументована поведінка marked, а не помилки. Якщо вам потрібен зворотний напрямок — витягнути відрендерений HTML назад у Markdown — скористайтеся інструментом HTML у Markdown.

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

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

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