📄
← Назад к руководствам

Как конвертировать Markdown в HTML: полное руководство

· Теги: markdown-to-html, markdown-converter, static-site-generator, jekyll-markdown, markdown-processing

Как конвертировать Markdown в HTML

Markdown создан для написания текстов, но веб работает на HTML. Каждый документ Markdown необходимо преобразовать в HTML, прежде чем браузер сможет его отобразить. Это руководство охватывает основные способы конвертации Markdown в HTML.

Способ 1: Инструменты командной строки

Pandoc

Pandoc — это универсальный конвертер документов, поддерживающий десятки форматов.

# Basic conversion
pandoc input.md -o output.html

# Standalone HTML with <html> and <body> tags
pandoc input.md -o output.html -s

# With table of contents
pandoc input.md -o output.html -s --toc

Python-Markdown

pip install markdown
python -m markdown input.md > output.html

import markdown
with open("input.md", "r") as f:
    text = f.read()
html = markdown.markdown(text, extensions=["fenced_code", "tables"])

CommonMark (JavaScript)

npm install commonmark

const commonmark = require("commonmark");
const reader = new commonmark.Parser();
const writer = new commonmark.HtmlRenderer();
const parsed = reader.parse("# Hello\nThis is **bold**.");
const html = writer.render(parsed);

Способ 2: Генераторы статических сайтов

Jekyll

Jekyll обеспечивает работу GitHub Pages. Он преобразует файлы Markdown из _posts или коллекций в HTML.

gem install jekyll bundler
jekyll new my-site
jekyll build
jekyll serve

Использует процессор Kramdown с шаблонами Liquid для динамического контента.

Hugo

Hugo — это генератор статических сайтов на Go, известный скоростью сборки в миллисекундах.

hugo new site my-site
hugo new posts/my-first-post.md
hugo server -D

Использует Goldmark в качестве рендерера Markdown по умолчанию с поддержкой таблиц, ограждённых блоков кода и сносок.

Next.js (MDX)

Next.js поддерживает MDX, встраивая React-компоненты внутрь Markdown.

npm install next @next/mdx @mdx-js/loader

MDX позволяет включать живые примеры кода, диаграммы и формы в документацию.

Способ 3: Онлайн-конвертер

Для разовых конвертаций без установки инструментов браузерные конвертеры предоставляют мгновенные результаты:

  1. Вставьте или наберите Markdown в панели редактора.
  2. Вывод HTML отображается в реальном времени.
  3. Скопируйте сгенерированный HTML для использования на любой веб-странице или в CMS.

Инструмент предпросмотра Markdown обрабатывает GitHub Flavored Markdown — таблицы, блоки кода, списки задач и зачёркивание — полностью в вашем браузере.

Способ 4: Плагины редакторов

| Редактор | Функция | Команда | |--------|---------|---------| | VS Code | Встроенный предпросмотр | Ctrl+Shift+V | | Sublime Text | MarkdownPreview | Alt+M | | IntelliJ IDEA | Встроенная поддержка | Quick Documentation | | Vim | vim-markdown | :MarkdownPreview |

Конвейер обработки

Когда генератор статических сайтов конвертирует Markdown в HTML, он следует этому конвейеру:

Markdown → Parse to AST → Apply extensions → Render to HTML → Apply template → Output page

Если функция отображается не так, как ожидалось, проблема обычно на стороне парсера (он не поддерживает синтаксис) или рендерера (он выводит неожиданный HTML).

Конвертируйте Markdown в HTML онлайн

Используйте инструмент предпросмотра Markdown, чтобы мгновенно конвертировать Markdown в HTML. Наберите или вставьте Markdown в редакторе, и отрендеренный предпросмотр обновляется в реальном времени.

Как конвертировать Markdown в HTML: полное руководство - CoolTool