Markdown 導(dǎo)出 HTML

1. 前言

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

例如，同樣的一段表格代碼，在 Typora 和 VS Code 預(yù)覽中的表現(xiàn)不同：

為了讓 Markdown 的表現(xiàn)形式穩(wěn)定，我們可將 Markdown 導(dǎo)出成 HTML 文件。

2. 語法詳解

2.1 使用 Typora 導(dǎo)出 HTML

Typora 導(dǎo)出 HTML 的操作方式為：

「文件」->「導(dǎo)出」->「HTML」

注意：導(dǎo)出時可以看到 HTML 和 HTML（Without Styles）兩個選項，它們的區(qū)別是：

導(dǎo)出 HTML 時，會根據(jù) Typora 所選主題（「菜單欄」->「主題」），導(dǎo)出包括擴(kuò)展在內(nèi)的所有內(nèi)容；

導(dǎo)出 HTML（Without Styles）時，生成的 HTML 文件只包含 Markdown 基本語法的轉(zhuǎn)換，不含任何擴(kuò)展及主題樣式。

例如，同樣的一段表格代碼，導(dǎo)出 HTML 和 HTML（Without Styles）的不同表現(xiàn)：

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

2.2 使用 Pandoc 導(dǎo)出 HTML

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

Pandoc 是一種標(biāo)記語言轉(zhuǎn)換工具，可實現(xiàn)不同標(biāo)記語言間的格式轉(zhuǎn)換。

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

實例 1：

使用 Pandoc 將 Markdown 轉(zhuǎn)換為 Html。

pandoc in.md -o out.html

實例 2：

轉(zhuǎn)換時增加外部樣式文件引用，如：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 有一些擴(kuò)展語法，比如「Mermaid」，「數(shù)學(xué)公式」等，要支持此類功能，Pandoc 也需要一些插件的支持，例如：Memaid-Filter 可用于渲染 Mermaid 圖像。

3. 小結(jié)

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