Markdown 轉 HTML 完整指南：marked.js、markdown-it 與 Pandoc 比較

Q: 支援 GitHub Flavored Markdown（表格、任務清單、程式碼區塊）嗎？

支援。轉換遵循 GFM 規格，| col1 | col2 | 格式的管線表格、- [x] 格式的任務清單核選框、~~刪除線~~、含語言提示的圍欄程式碼區塊都會正確轉成標準 HTML 元素。

你用 Markdown 寫好的記事，要貼到不支援 Markdown 的部落格上；HTML 郵件需要把正文嵌入模板；CMS 的 WYSIWYG 編輯器只接受 HTML 格式。這些場景最後都指向同一件事：把 Markdown 轉成 HTML。

在本地跑 Pandoc 或建置指令也能完成轉換，但每次都要打指令有點繁瑣。另外，把內部草稿或私密文件貼到外部線上工具也不太放心。這篇會整理 Markdown 與 HTML 的關係，以及三種實際可用的轉換方式：瀏覽器工具、JavaScript 程式庫、以及 CLI 指令。

快速把 Markdown 轉成 HTML

把 Markdown 貼到 Markdown 轉 HTML，按下執行按鈕就能立刻得到 HTML 程式碼。不需要安裝任何東西，所有處理都在瀏覽器內完成，資料不會傳到外部伺服器。

這個轉換以 CommonMark在新分頁中開啟為基礎語法，表格、任務清單、刪除線、自動連結等擴充功能則遵循 GitHub Flavored Markdown（GFM）規格在新分頁中開啟。CommonMark 與 GFM 的差異（如表格、刪除線）在 CommonMark 與 GFM 的差異有詳細整理。

Markdown 與 HTML 的關係

Markdown 是一種輕量標記語言（lightweight markup language），設計目標是讓寫起來直覺、讀起來清楚。HTML 則是瀏覽器實際渲染時使用的格式，用標籤來包裝每個元素。例如這段 Markdown：

# 標題

這是包含**粗體**與_斜體_的段落。

- 項目 1
- 項目 2

轉成 HTML 後會是：

<h1>標題</h1>
<p>這是包含<strong>粗體</strong>與<em>斜體</em>的段落。</p>
<ul>
  <li>項目 1</li>
  <li>項目 2</li>
</ul>

Markdown 從設計之初就以輸出 HTML 為前提，兩者的語法與標籤對應關係接近 1 對 1。

什麼時候需要把 Markdown 轉成 HTML

不支援 Markdown 的部落格與 CMS

WordPress 的經典型編輯器、部分公司的內部 CMS 等，仍然只接受 HTML 輸入。先用 Markdown 寫好草稿，再轉成 HTML 貼上，就能保留你想要的版面與格式，不用跟 WYSIWYG 編輯器糾纏。

HTML 郵件

寄信服務或行銷郵件模板接受 HTML 格式的正文。用 Markdown 撰寫草稿能保持可讀性，完成後再轉成 HTML 嵌入模板即可，格式整齊，不需要手動調整。

靜態網站與文件建置管線

有些靜態網站產生器或內部文件工具不直接解析 Markdown，而是在建置階段讀取預先渲染好的 HTML 檔案。這時候管線的其中一道工序就是 Markdown 轉 HTML。

用 FormatArc 轉換

Markdown 轉 HTML 的操作很直接：貼上文字、按下按鈕、右側就出 HTML。

步驟 1：開啟工具

前往 Markdown 轉 HTML 頁面。

步驟 2：貼上 Markdown

在左側編輯區貼上你要轉換的 Markdown。標題、列表、連結、圖片、程式碼區塊等常用語法都有支援。

步驟 3：按下執行按鈕

按下執行後，右側立刻輸出轉換好的 HTML。

FormatArc Markdown 轉 HTML 轉換結果

GFM 已啟用，所以 | col1 | col2 | 格式的管線表格、- [x] 的任務清單核選框都會正確轉成對應的 HTML 標籤。

所有運算都在瀏覽器內的 JavaScript 引擎中執行，即使是未公開的草稿或公司機密文件也不會外洩。

支援的語法

常用的 GFM 語法都涵蓋了：

標題（# 到 ######）
段落與換行
強調（**粗體**、_斜體_、~~刪除線~~）
無序與有序列表
任務清單（- [ ]、- [x]）
連結與圖片
行內程式碼與圍欄程式碼區塊（三個後引號）
表格
引用（>）
水平線（---）

數學公式（KaTeX / MathJax）不支援。

關於 Markdown 表格語法（對齊、儲存格內換行、轉義等）的詳細說明，請參考 Markdown 表格語法。

用程式庫或 CLI 轉換

如果只是偶爾轉一下，瀏覽器工具就夠了。但如果要整合到 CI/CD 建置管線、自建靜態網站產生器、或在應用內部渲染 Markdown，用 JavaScript 程式庫或 CLI 會比較合適。以下是常見的選項。

marked.js（瀏覽器與 Node 皆可）

輕量且快速的 Markdown 解析器，瀏覽器與 Node.js 環境都能跑。用 npm install marked 安裝後，一行之內就能轉換：

import { marked } from 'marked';

const html = marked.parse('# 標題\n\n這是**粗體**的段落。');

GFM 預設啟用，任務清單、管線表格、圍欄程式碼區塊不需要額外設定就會按規格處理。

不想準備建置環境時，也可以從 CDN 載入，直接在網頁頁面內轉換。但處理外部使用者的輸入時，一定要搭配 DOMPurify 等消毒器（sanitizer）：

<script type="module">
  import { marked } from 'https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js';
  document.body.innerHTML = marked.parse('# 直接在瀏覽器中轉換');
</script>

markdown-it（擴充性取向）

以插件架構設計的解析器。需要腳註、自訂容器區塊、或站台專屬語法擴充的專案適合用它。

import MarkdownIt from 'markdown-it';

const md = new MarkdownIt({ html: true, linkify: true });
const html = md.render('# 標題\n\n這是**粗體**的段落。');

表格與任務清單預設是關閉的。需要 GFM 等級的行為時，要另外加上 markdown-it-task-lists 等插件。

remark（unified 管線）

marked 與 markdown-it 直接把 Markdown 字串一步轉成 HTML 字串；remark在新分頁中開啟的路線不同：先解析成語法樹（AST），再透過插件逐步轉換，最後序列化成 HTML。remark-gfm 啟用表格與任務清單，remark-rehype 切換到 HTML 樹，中間可以插入 rehype-sanitize 等處理，最後用 rehype-stringify 輸出。

import { remark } from 'remark';
import remarkGfm from 'remark-gfm';
import remarkRehype from 'remark-rehype';
import rehypeSanitize from 'rehype-sanitize';
import rehypeStringify from 'rehype-stringify';

const html = await remark()
  .use(remarkGfm)
  .use(remarkRehype)
  .use(rehypeSanitize)
  .use(rehypeStringify)
  .process('# 標題\n\n這是**粗體**的段落。');

比起一行的 marked.parse()，程式多了不少步驟。但這正是管線架構的取捨：當轉換只是較大處理流程中的一環——消毒、標題錨點、自動產生目錄——remark 就比一把梭的 parser 合適得多。FormatArc 自己也是這樣分：Markdown 轉 HTML 工具用 marked 處理貼上的文字，而部落格頁面則用 remark + rehype 管線（GFM、消毒、目錄用的標題 slug）來渲染。

Pandoc（CLI）

功能強大的通用文件轉換 CLI 工具。大批量檔案轉換、跨格式轉換（Markdown/HTML 到 PDF、Word 等）是它最大的優勢。

pandoc -f markdown -t html input.md -o output.html

可以用參數切換 CommonMark、GFM、MultiMarkdown 等解析器。單一文字轉換的速度可能不如 JavaScript 程式庫，但格式支援的廣度與彈性在 CLI 工具中首屈一指。

預設輸出是不含 <html> 與 <head> 標籤的 HTML 片段。Pandoc 手冊在新分頁中開啟中常用的主要參數如下：

參數	作用
`-f gfm`	以 GitHub Flavored Markdown 而非 Pandoc 擴充 Markdown 來解析輸入
`--standalone`	輸出含 `<html>` 與 `<head>` 的完整 HTML 文件，而非片段
`--toc`	依據正文標題自動產生目錄（需搭配 `--standalone`）
`--template FILE`	把內容填入指定的自訂 HTML 模板後輸出
`--embed-resources`	將圖片、CSS、腳本內嵌到檔案中，產出單一自足檔案
`--highlight-style STYLE`	選擇程式碼區塊的語法高亮主題（`pygments`、`kate` 等）

用途比較

工具	瀏覽器可執行	GFM 表格預設支援	需安裝	適合用途
FormatArc（本工具）	可	可	不需要	貼上即轉的單次轉換
marked.js	可	可	需要（`npm`）	網頁應用與前端整合
markdown-it	可	需插件	需要（`npm`）	自訂語法擴充或需要插件的情況
remark	可	需插件（`remark-gfm`）	需要（`npm`）	含消毒、目錄產生的多階段管線
Showdown	可	需選項（`tables: true`）	需要（`npm`）	既有專案維護與 HTML 轉 Markdown 逆轉換
Pandoc	不可	可	需要（執行檔）	建置管線、大批量處理、多格式轉換

只是想貼上 Markdown 拿到 HTML 的話，瀏覽器工具最快。建置自動化用 Pandoc。要將解析器打包進應用 bundle 的話，marked.js 或 markdown-it 是合理選擇。

使用轉換後 HTML 的注意事項

處理不受信輸入一定要消毒

Markdown 規格允許直接嵌入原生 HTML 標籤。如果輸入的 Markdown 包含 <script> 標籤或危險屬性，轉換後的 HTML 也會原封不動地保留。自己寫的內容沒問題，但處理外部使用者的內容或表單輸入時，渲染前務必經過 DOMPurify 等消毒器。

輸出不含 CSS 樣式

轉換後的 HTML 只包含文件的語義與結構，不會帶 CSS。貼到部落格或網站後，視覺樣式由該平台的預設樣式表或主題決定。

程式碼區塊的語法高亮

Markdown 中用 ```javascript 指定語言，轉換結果只會加上 class="language-javascript"，實際的語法高亮要在渲染頁面中另外載入 Prism.js 或 highlight.js。

常見問題

支援 GitHub Flavored Markdown（表格、任務清單、程式碼區塊）嗎？

支援。轉換遵循 GFM 規格，| col1 | col2 | 格式的管線表格、- [x] 格式的任務清單核選框、~~刪除線~~、含語言提示的圍欄程式碼區塊都會正確轉成標準 HTML 元素。

轉換是不是在瀏覽器內完成的？

是的。Markdown 解析與 HTML 生成完全在瀏覽器內的 JavaScript 中處理，文字不會送到伺服器。內部未公開文件或私人記事都可以安全轉換。

轉換後的 HTML 直接發布安全嗎？

自己寫的內容直接發布沒有問題。但 Markdown 允許嵌入原生 HTML 標籤，如果來源不可信（例如外部使用者的表單輸入），轉換結果中可能包含 <script> 標籤。這種情況下，渲染前必須先經過 DOMPurify 等消毒器。

跟 Pandoc 有什麼不同？

Pandoc 是支援多種格式、輸出可高度自訂的 CLI 工具，但需要安裝與操作終端機。FormatArc 的轉換器在瀏覽器中貼上、按按鈕就能拿到結果，適合單次轉換。建置自動化或大批量轉換則用 Pandoc 較合適。

HTML 能轉回 Markdown 嗎？

可以。反方向的轉換可以用 HTML 轉 Markdown 完成，它會把 HTML 標籤移除，輸出乾淨且結構完整的 Markdown。詳細用法請參考 HTML 轉 Markdown 指南。

總結

把 Markdown 轉成 HTML 是部落格發布、HTML 郵件、CMS 輸入等文件工作中常見的需求。
需要立即拿到結果時，用 Markdown 轉 HTML 在瀏覽器中安全快速地完成。
應用開發用 marked.js 或 markdown-it，多階段管線用 remark，大批量處理用 Pandoc。
轉換外部使用者的輸入時，務必搭配 DOMPurify 等工具做消毒處理以防 XSS。
想反方向把 HTML 轉回 Markdown，可以用 HTML 轉 Markdown；要把 CSV 轉成 Markdown 表格則參考 CSV 轉 Markdown 指南。