📄
← 返回教程列表

如何将 Markdown 转换为 HTML：完整指南

· 标签: markdown-to-html, markdown-converter, static-site-generator, jekyll-markdown, markdown-processing

如何将 Markdown 转换为 HTML

Markdown 是为书写而设计的，但 Web 运行在 HTML 之上。每一份 Markdown 文档都需要转换为 HTML 后，浏览器才能显示。本指南涵盖了将 Markdown 转换为 HTML 的主要方法。

方法一：命令行工具

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);

方法二：静态站点生成器

Jekyll

Jekyll 为 GitHub Pages 提供支持。它将 _posts 或集合中的 Markdown 文件转换为 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，可以在 Markdown 中嵌入 React 组件。

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

MDX 让你可以在文档中包含实时代码示例、图表和表单。

方法三：在线转换器

对于无需安装工具的一次性转换，基于浏览器的转换器可以即时提供结果：

  1. 将 Markdown 粘贴或输入到编辑器面板中。
  2. HTML 输出会实时显示。
  3. 复制生成的 HTML，用于任何网页或 CMS。

Markdown 预览工具完全在浏览器中处理 GitHub 风格 Markdown——表格、代码块、任务列表和删除线。

方法四：编辑器插件

| 编辑器 | 功能 | 命令 | |--------|---------|---------| | 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