Як конвертувати Markdown у HTML (і PDF): 4 способи

Markdown чудовий для письма, але ті, кому ви надсилаєте документ, часто чекають на вебсторінку або PDF. Добра новина: конвертувати Markdown легко, і в більшості випадків складний набір інструментів не потрібен.

Нижче — чотири способи, від найшвидшого до найгнучкішого, і добірка порад, завдяки яким результат виглядатиме професійно.

Коротке порівняння

1. Експорт із редактора в браузері

Найшвидший шлях — редактор, який експортує напряму. У Markdown Preview Editor відкрийте або вставте документ — в онлайн-версії чи власній копії — і скористайтеся кнопками в заголовку:

• HTML створює один самостійний .html-файл. Стилі, підсвічування коду, формули, діаграми й зображення, які ви відкрили разом із документом, вбудовуються, тож файл правильно виглядає на будь-якому комп’ютері, і його можна як є додати до листа чи завантажити будь-куди.
• Друк відкриває діалог друку браузера. Виберіть як принтер Зберегти як PDF, щоб отримати PDF. Друкується лише відображений документ — без панелі інструментів і редактора.
• Зберегти завантажує вихідний Markdown як .md-файл.

Оскільки все відбувається в браузері, цей спосіб підходить і для документів, які не хочеться завантажувати в онлайн-конвертер.

Коротко про PDF

Натисніть Друк і виберіть Зберегти як PDF. Покрокова інструкція з найкращими налаштуваннями друку — на сторінці Markdown у PDF.

2. VS Code із розширенням

У VS Code є вбудований перегляд Markdown, але немає кнопки експорту. Розширення на кшталт Markdown PDF чи Markdown Preview Enhanced додають команди для експорту в HTML і PDF. Це зручно, якщо VS Code — ваш основний редактор; оформлення результату залежить від розширення, а деякі з них під час першого запуску завантажують headless-браузер.

3. Pandoc — універсальний конвертер

Pandoc конвертує між десятками форматів і є стандартним інструментом для книжок, наукових статей та автоматизованої документації. Після встановлення конвертація — це одна команда:

bash# Markdown у повноцінну HTML-сторінку
pandoc report.md -o report.html --standalone --metadata title="Report"

# Markdown у PDF (потрібен PDF-рушій, наприклад дистрибутив LaTeX)
pandoc report.md -o report.pdf --pdf-engine=xelatex

# Markdown у Word, якщо дуже просять
pandoc report.md -o report.docx

Без --standalone Pandoc видає лише фрагмент HTML — зручно, якщо ви вставляєте його в наявну сторінку. Для PDF потрібен окремий рушій: дистрибутив LaTeX або рушій на основі HTML, як-от WeasyPrint. Сильна сторона Pandoc — контроль: шаблони, цитування, нумеровані розділи й перехресні посилання.

4. Кілька рядків JavaScript

Якщо Markdown — частина вашого сайту чи процесу збирання, найгнучкіший варіант — бібліотека. З markdown-it:

jsimport MarkdownIt from 'markdown-it';
import { readFileSync, writeFileSync } from 'node:fs';

const md = new MarkdownIt({ linkify: true, typographer: true });
const body = md.render(readFileSync('README.md', 'utf8'));
writeFileSync('README.html', `<!doctype html><meta charset="utf-8"><title>README</title>${body}`);

Плагіни додають виноски, списки завдань, формули та інше. Пам’ятайте: результат безпечний рівно настільки, наскільки безпечні вхідні дані. Якщо Markdown надходить від інших людей, очистіть HTML (наприклад, за допомогою DOMPurify), перш ніж публікувати.

Поради для кращого HTML і PDF

Почніть з однієї чіткої назви

Конвертери беруть назву документа з імені файлу, першого заголовка або явних метаданих. Дайте кожному документу змістовне ім’я файлу й один заголовок # — і експортовані HTML та PDF легко буде впізнати в папці завантажень чи вкладці браузера.

Тримайте зображення поруч із документом

Використовуйте відносні шляхи на кшталт images/chart.png і зберігайте файли в тій самій папці. Коли ви відкриваєте всю папку в Markdown Preview Editor, зображення розпізнаються й вбудовуються в HTML-експорт. Віддалені зображення, які не завантажено в перегляді, теж не вбудовуються.

Керуйте розривами сторінок

У Markdown немає синтаксису для розриву сторінки. Для друкованих документів починайте великі розділи із заголовка ## і не робіть таблиці надто довгими — браузери намагаються не розривати рядки таблиці, але величезна таблиця все одно перейде на наступну сторінку. В інструментах, що дозволяють сирий HTML і вбудовані стилі, як-от Pandoc, можна вставити <div style="page-break-after: always"></div>.

Перевірте формули й діаграми перед експортом

У більшості інструментів формули й діаграми відображаються JavaScript-бібліотеками. Спершу перевірте їх у перегляді — див. наші посібники про формули в Markdown і діаграми Mermaid. В HTML-експорті Markdown Preview Editor вони зберігаються як готова розмітка й зображення, тож експортованому файлу не потрібні жодні скрипти.

Обирайте тему свідомо

Темний HTML-експорт приємний на екрані. Для паперу нічого перемикати не треба: Markdown Preview Editor автоматично друкує у світлій темі.