Markdown 導出 HTML

1. 前言

Markdown 的源文件以 md 為后綴。Markdown 是 HTML 語法的簡化版本，它本身不帶有任何樣式信息。我們所看到的 Markdown 網頁（如：github 里常用的 README.md 文件）、Markdown 編輯器（比如 Typora）預覽的效果，其實都是將 Markdown 文檔內容首先轉換成 HTML 標簽，再配以某些默認預定共同渲染而成的。

例如，同樣的一段表格代碼，在 Typora 和 VS Code 預覽中的表現不同：

為了讓 Markdown 的表現形式穩定，我們可將 Markdown 導出成 HTML 文件。

2. 語法詳解

2.1 使用 Typora 導出 HTML

Typora 導出 HTML 的操作方式為：

「文件」->「導出」->「HTML」

注意：導出時可以看到 HTML 和 HTML（Without Styles）兩個選項，它們的區別是：

導出 HTML 時，會根據 Typora 所選主題（「菜單欄」->「主題」），導出包括擴展在內的所有內容；

導出 HTML（Without Styles）時，生成的 HTML 文件只包含 Markdown 基本語法的轉換，不含任何擴展及主題樣式。

例如，同樣的一段表格代碼，導出 HTML 和 HTML（Without Styles）的不同表現：

一般情況下，推薦使用「導出 HTML」的方法。
除非需要重新定義樣式及擴展，否則不推薦使用「導出 HTML（Without Styles）」的導出方式。

2.2 使用 Pandoc 導出 HTML

如果只有 Markdown 源文件，在不通過 Markdown 編輯器的情況下，還可以使用 Pandoc 將其直接轉換成 HTML 文件。

Pandoc 是一種標記語言轉換工具，可實現不同標記語言間的格式轉換。

Pandoc 的安裝方法參見其 Github 項目頁。

實例 1：

使用 Pandoc 將 Markdown 轉換為 Html。

pandoc in.md -o out.html

實例 2：

轉換時增加外部樣式文件引用，如：style.css。

pandoc in.md -c style.css out.html

注意：此時輸出的是一個目錄。

實例 3：

將所有外部文件都嵌入到單個 HTML 文件中，包括嵌入視頻、圖片等。

pandoc -s --self-contained -c style.css in.md -o out.html

Markdown 有一些擴展語法，比如「Mermaid」，「數學公式」等，要支持此類功能，Pandoc 也需要一些插件的支持，例如：Memaid-Filter 可用于渲染 Mermaid 圖像。

3. 小結

• Markdown 源文件只規定了顯示的內容，并沒有定義顯示的樣式，所以在不同的預覽環境下會看到不同的效果。為了使其保持統一，需要將 Markdown 文件轉換成 HTML 文件；
• 常見的 Markdown 編輯器都帶有導出成 HTML 的功能，導出后通常含有編輯器自帶樣式；
• 利用 Pandoc，我們可以在命令行中直接將 Markdown 文件導出成 HTML 文件。