Конвертер Markdown у HTML

Конвертер Markdown в HTML бере найпоширеніший робочий процес створення контенту в сучасному вебі — написання у форматі Markdown та публікація у вигляді HTML — і робить його миттєвим. Вставте будь-який Markdown у ліву панель, і права панель покаже відрендерений HTML у реальному часі. Жодних звернень до сервера, реєстрації чи завантаження файлів: marked.js працює повністю у вашому браузері, перетворюючи Markdown на чистий HTML за мілісекунди. Використовуйте його для разової конвертації README, попереднього перегляду чорнеток блогів, міграції CMS між платформами з різними діалектами Markdown або швидкої перевірки правильності синтаксису перед комітом у генератор статичних сайтів. Підтримує повну специфікацію CommonMark плюс розширення GitHub Flavored Markdown (таблиці, списки завдань, закреслення, автопосилання) — це означає, що те, що працює на GitHub, працюватиме тут без сюрпризів.

Крок 1: Вставте свій текст Markdown у ліву панель введення. Конвертер приймає будь-яку довжину від одного рядка до тисяч рядків контенту. Працює стандартний синтаксис CommonMark: `#` для заголовків, `*текст*` для курсиву, `текст` для жирного шрифту, `` `код` `` для вбудованого коду, `[посилання](url)` для посилань, `-` або `*` для елементів ненумерованого списку, `1.` для нумерованих списків, `>` для цитат, потрійні зворотні лапки для блоків коду. Крок 2: Спостерігайте, як права панель рендерить HTML у реальному часі під час введення чи вставки. Таблиці відображаються з правильними рамками, заголовки отримують автоматично згенеровані атрибути `id` (для якірних посилань), блоки коду зберігають теги мов, а вбудований HTML проходить без змін. Крок 3: Натисніть «Копіювати HTML», щоб отримати вихідний код HTML для вставки у файл `.html`, текстовий редактор CMS або шаблон статичного сайту. Натисніть «Копіювати відрендерене», щоб скопіювати відформатований вигляд, якщо ваша цільова платформа підтримує форматований текст (Word, Google Docs, поштові клієнти).

У цьому конвертері обидва варіанти увімкнено за замовчуванням. CommonMark (2014) — це стандартизована, однозначна специфікація Markdown, яка визначає точну поведінку парсера; її прийняли GitHub, Reddit, Stack Overflow, Discourse та більшість сучасних інструментів. GitHub Flavored Markdown (GFM) розширює CommonMark п'ятьма доповненнями: таблиці (рядки, розділені вертикальними рисками, з вирівнюванням), списки завдань (`- [ ]` та `- [x]` для прапорців), закреслення (`~~текст~~`), автопосилання (прості URL стають клікабельними без ясного синтаксису `[](url)`) та обмежений сирий HTML (деякі теги фільтруються з міркувань безпеки). Оскільки файли README на GitHub є найпоширенішим джерелом Markdown у вебі, сумісність із GFM є важливою — цей конвертер рендерить саме те, що рендерить GitHub для того самого вводу. Якщо вам потрібен чистий вивід CommonMark (без розширень GFM), ви можете вимкнути GFM у меню параметрів, але налаштування за замовчуванням підходить для 95% випадків використання.

Таблиці GFM використовують вертикальні риски (`|`) для визначення стовпців та дефіси (`-`) у рядку розділювача заголовка. Базовий синтаксис: `| Ім'я | Вік |\n|------|-----|\n| Аліса | 30 |`. Вирівнювання стовпців закодовано в рядку розділювача: `-:` для правого, `:-:` для центру, `:-` або `-` для лівого (за замовчуванням). Приклад з вирівнюванням: `| Інструмент | Швидкість | Безплатно |\n|:-----|------:|:----:|` створює таблицю з 3 стовпцями, де Інструмент вирівняно за лівим краєм, Швидкість — за правим, Безплатно — по центру. Рендер виводить належні елементи `<table>`, ``, ``, `<tr>`, `<th>`, `<td>` з атрибутами inline `style="text-align:..."` для вирівнювання. Вертикальні риски на початку та в кінці кожного рядка є необов'язковими, але зазвичай додаються для зручності читання. Ширина стовпців у вихідному коді не обов'язково повинна збігатися — парсер байдужий до візуальних пробілів.

Блоки коду використовують потрійні зворотні лапки (або тильди) для відкриття та закриття: ```\nтут код\n```. Додайте підказку мови після відкриваючого блоку, щоб увімкнути підсвічування синтаксису після публікації HTML: ```javascript, ```python або ```bash. Конвертер виводить `<pre><code class="language-X">`, де X — назва мови. Цей конвертер не застосовує кольори синтаксису самостійно — кольори додає окрема бібліотека на кшталт highlight.js, Prism.js або Shiki під час рендерингу HTML на вашій сторінці. Навіщо розділяти? Бібліотеки підсвічування синтаксису важать по 50 КБ–200 КБ кожна й суттєво збільшують вагу сторінки; конвертер залишається легким, виводячи лише тег мови та дозволяючи вашому пайплайну публікації додавати кольори. Поширені теги мов: javascript, typescript, python, java, csharp, go, rust, ruby, php, html, css, json, yaml, xml, bash, sql, markdown.

Інтерфейс із розділеними панелями — вихідний код Markdown ліворуч, попередній перегляд HTML праворуч — є стандартним робочим процесом для технічних письменників та розробників. Він дозволяє писати в легкому і зручному для читання форматі Markdown, одразу бачачи результат, схожий на опублікований. У порівнянні з WYSIWYG-редакторами (Word, Google Docs): Markdown писати швидше (не потрібно тягнутися мишею до кнопок форматування), він підтримує контроль версій (простий текст чисто порівнюється в Git), є портативним (працює в будь-якому текстовому редакторі) та створює чистий HTML без зайвих вкладених тегів div. У порівнянні з написанням HTML безпосередньо: Markdown у 3–5 разів швидший для типового контенту (заголовки, абзаци, списки, посилання), читається природно у вихідному вигляді та звільняє процес написання від прийняття рішень щодо форматування. Використовуйте Markdown для будь-якого насиченого текстом контенту; перемикайтеся на HTML лише тоді, коли вам потрібен точний контроль над поданням.

Конвертер виводить семантичний HTML5 — елементи, що описують значення контенту, а не лише зовнішній вигляд. Заголовки стають тегами від `<h1>` до `<h6>` з автоматично згенерованими атрибутами `id` для якірних посилань. Абзаци стають `<p>`. Жирний текст стає `<strong>` (а не `<b>`), курсив стає `<em>` (а не `<i>`) — семантичні еквіваленти, які краще працюють із програмами читання з екрана та цільовим CSS. Ненумеровані списки стають `<ul><li>`, нумеровані — `<ol><li>`. Цитати стають `<blockquote>`. Фрагменти коду стають `<code>`, заблоковані блоки — `<pre><code>`. Посилання стають `<a href>`. Зображення стають `<img src alt>`. Результатом є чистий, доступний HTML, який можна без змін помістити в будь-яку сучасну CMS, генератор статичних сайтів або файл HTML. Жодних вбудованих стилів (окрім вирівнювання таблиць), жодних зайвих обгорток `<div>`, жодних атрибутів класів (окрім тегів мов у блоках коду).

Файли README є найпоширенішим джерелом Markdown у вебі — кожен репозиторій GitHub має такий файл, більшість реєстрів пакетів (npm, PyPI, RubyGems) рендерять їх автоматично. Щоб конвертувати файл README.md для сайту документації, вставте вміст файлу в конвертер і скопіюйте вихідний HTML. Поширені коригування після конвертації: (1) Відносні посилання — файли README часто використовують відносні шляхи (`./docs/install.md`); перепишіть їх на абсолютні URL для опублікованого сайту. (2) Шляхи до зображень — та сама проблема, зображення в README використовують `./images/logo.png`; оновіть на URL опублікованого зображення. (3) Якірні ідентифікатори — автоматично згенеровані ідентифікатори заголовків використовують формат у нижньому регістрі з дефісами (`Installation` стає `id="installation"`); відповідно оновіть внутрішні якірні посилання. (4) Специфічний для репозиторію синтаксис — GitHub автоматично створює посилання на проблеми на кшталт `#123` та згадки користувачів на кшталт `@username`; вони не створюють автопосилання поза межами GitHub, за потреби перепишіть їх як явні посилання.

Генератори статичних сайтів (SSG) обробляють файли Markdown у сторінки HTML під час збирання, тому ручна конвертація зазвичай не потрібна — ви робите коміти файлів `.md` у свій репозиторій, а SSG робить решту. Поширені SSG та їх обробка Markdown: Jekyll (Ruby) використовує kramdown за замовчуванням, сумісний із CommonMark із деякими особливостями GFM. Hugo (Go) використовує Goldmark, повний CommonMark + GFM + розширення. Next.js MDX (JavaScript) використовує remark/rehype, дозволяє вбудовувати компоненти React у Markdown. Eleventy (JavaScript) за замовчуванням використовує markdown-it. Astro (JavaScript) використовує remark і підтримує MDX. Gatsby (JavaScript) використовує gatsby-plugin-mdx з remark. Цей конвертер найкорисніший для: (a) разових конвертацій поза робочим процесом SSG, (b) перевірки того, чи правильно рендериться ваш Markdown перед комітом, (c) міграції контенту між SSG, які використовують різні діалекти Markdown.

Шість поширених труднощів. (1) М'які переноси рядків всередині абзаців — поодинокі нові рядки згортаються у пробіли згідно з CommonMark, а не `<br>`. Використовуйте два пробіли в кінці або порожній рядок для явного перенесення. (2) Блоки коду з відступами (відступ у 4 пробіли) порівняно із заблокованими (потрійні зворотні лапки) — працюють обидва варіанти, але заблоковані рекомендуються, оскільки вони зберігають теги мови. (3) Вкладені списки з неправильним відступом — CommonMark вимагає 2 або 4 пробіли, змішування табуляцій і пробілів порушує рендеринг у деяких парсерах. (4) Сирий HTML, видалений суворішими рендерами — GitHub та Reddit фільтрують багато тегів з міркувань безпеки; те, що працює в цьому конвертері, може працювати не скрізь. (5) Заголовки без порожнього рядка до/після — більшість парсерів допускають це, але CommonMark рекомендує порожні рядки для зрозумілості. (6) Закреслення з однією тильдою — одна тильда не працює, потрібні `~~дві тильди~~`. Під час налагодження перевірте, який діалект підтримує цільова платформа (CommonMark? GFM? щось кастомне?), перш ніж припускати, що конвертер працює неправильно.

Цей конвертер працює на 100% у вашому браузері — ваш текст у форматі Markdown ніколи не залишає сторінку. Конвертери Markdown на стороні сервера зазвичай реєструють кожне перетворення для аналітики та можуть зберігати вхідні дані для кешування чи моніторингу помилок. Для більшості звичайних конвертацій це не є проблемою, але розробники та технічні письменники регулярно вставляють контент, який не повинен витекти: ключі API в прикладах коду, внутрішню документацію, пропрієтарні технічні специфікації, чорнетки публікацій у блогах під NDA, дані клієнтів у документації служби підтримки. Конвертація на стороні клієнта повністю усуває ризик витоку. Щоб перевірити: відкрийте вкладку Network у DevTools браузера, вставте Markdown, натисніть конвертувати — ви побачите нуль вихідних запитів під час перетворення. Бібліотека marked.js завантажується один раз при відкритті сторінки (видно при початковому завантаженні сторінки); після цього вся конвертація відбувається локально. Для неперевірених вхідних даних Markdown із сторонніх джерел очищуйте відрендерений HTML за допомогою DOMPurify перед вставкою на сторінку, щоб запобігти XSS-атакам.

Швидкий довідник синтаксису. Заголовки: `# H1` до `###### H6`. Жирний: `text`. Курсив: `*text*` або `_text_`. Жирний + курсив: `*text*`. Закреслений (GFM): `~~text~~`. Вбудований код: `` `code` ``. Посилання: `[text](https://url.com)`. Зображення: ``. Автопосилання (GFM): `https://example.com` (необроблена URL-адреса, без дужок). Невпорядкований список: `- item` або `* item` або `+ item`. Впорядкований список: `1. item`. Вкладений список: відступ у 2 пробіли. Цитата: `> quoted text`. Багаторядкова цитата: додавайте префікс `>` до кожного рядка. Блок коду у зворотних лапках: потрійні зворотні лапки (відкриваючі та закриваючі) з необов'язковим тегом мови. Блок коду з відступом: 4 пробіли або 1 табуляція на початку рядка. Горизонтальна лінія: `---` або `***` на окремому рядку. Таблиця (GFM): `| col1 | col2 |\n|------|------|\n| val1 | val2 |`. Список завдань (GFM): `- [ ] todo` and `- [x] done`. Пропуск HTML: будь-який HTML-тег працює в тексті. Жорсткий розрив рядка: два пробіли в кінці. Екранування спеціального символу: зворотний слеш перед ним, наприклад `\*not italic\*`. Використовуйте конвертер для будь-якого випадку, який вас плутає — перегляд у реальному часі показує, як саме відображається кожен шаблон.