📄
← 返回教學列表

如何將 Markdown 轉換為 HTML：完整指南

· 標籤: markdown-to-html, markdown-converter, static-site-generator, jekyll-markdown, markdown-processing

如何將 Markdown 轉換為 HTML

Markdown 專為寫作而設計，但網頁運行依賴 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 Flavored 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