Markdown溫故知新(4)：更多擴充套件語法及HTML
- 1、強調（刪除 & 高亮）
- 2、腳註（註腳）
- 3、數學公式
- 4、更多擴充套件語法
- 5、終極擴充套件之內嵌 HTML
- 5.1、文字修飾類標籤
- 5.2、內容排版類標籤
- 5.3、圖片及多媒體標籤
- 5.4、錨元素（A 標籤）
- 6、總結
1、強調（刪除 & 高亮）
Markdown 官方定義了粗體和斜體兩個強調，為了滿足更加個性化的強調需求，某些 Markdown 應用還定義了刪除和高亮兩個強調語法。示例一下（截自馬克飛象）：
2、腳註（註腳）
在紙質書中，腳註一般印刷在書頁的下端，作用是對正文內容做進一步的補充說明。
而在 Markdown 中，可以在文章的最後或其它你喜歡的地方定義腳註，語法是[^腳註名]: 說明文字
[^腳註名]。而且點腳註名可以直接跳轉到定義腳註的地方，很方便看補充說明。
腳註用法，示例一下（截自馬克飛象）：
3、數學公式
對高校理工科的師生，或數學、物理等領域的研究人員而言，發論文、寫期刊時常有插入數學符號的需求。LaTeX 公式是學術圈的主流選擇，LaTeX 是一種基於 TeX 的排版系統，使用門檻比較低，在生成複雜表格和數學公式這一塊的表現尤為突出。
在網際網路誕生之後，又出現了在網頁上顯示數學符號的跨瀏覽器的 JavaScript 庫，較為知名的有 MathJax 和 KaTex。MathJax 的優點是支援絕大部分 TeX/LaTeX 語法，且支援多種輸出格式。缺點是體積太大，當公式比較多時渲染速度比較慢。KaTex 比 MathJax 要快，也更易於使用，但支援得不夠全面。
很多知名的學術網站都支援 MathJax，而多數 Markdown 工具則是通過支援 KaTex 進而實現對 LaTeX 公式的支援，印象筆記的 Markdown 就是其中之一。
通常在公式前後加一個$表示行內公式，在公式前後加兩個$表示塊級公式。這種用$包裹數學公式的寫法 MathJax 和 KaTex 都支援，因此推薦這種寫法。示例一下（截自印象筆記）：
有些 Markdown 工具還會提供特有的公式寫法，比如印象筆記，儘管可能比通用標準更好用，但依然建議儘量不要使用，因為遷移成本太高。示例一下（截自印象筆記）：
如果你還想了解更多數學公式的寫法，可參考如下兩個連結：
- 常用數學符號的 LaTeX 表示方法
- KaTeX Support Table of TeX Functions
4、更多擴充套件語法
我在本系列的第三篇博文和前文中已經介紹了 9 種很讚的擴充套件語法。其實還有許多對特定人群或特定場景來說比較實用的擴充套件語法。比如很多 Markdown 工具都支援的程式碼高亮。又比如 GFM 中的 @mention、#reference、Emoji 表情等便於在 GitHub 上進行溝通協作的語法。再比如印象筆記的 Markdown 支援的圖表語法。
5、終極擴充套件之內嵌 HTML
在本系列的第一篇博文中介紹過，Markdown 引擎會把 Markdown 語法轉換為 HTML，所以理論上，我們可以在 Markdown 文件中內嵌入任何 HTML 標籤，當然也包括 CSS。所以，但如果你是個喜歡折騰的人，那麼你還可以用終極大殺器 HTML 來對 Markdown 文件做進一步的個性化擴充套件或美化。
注意：本文中的 HTML 泛指廣義上的 HTML，包括 HTML、XHTML、HTML5 等。
下面就來介紹一下如何在 Markdown 中嵌入 HTML 以及常見的 Markdown 語法所對應的 HTML 標籤。
5.1、文字修飾類標籤
Markdown 語法與 HTML 中文字修飾類標籤的對應關係：
- 1、Markdown 中的標題對應著 HTML 中的 h 標籤。一個
*對應<h1>，兩個*對應<h2>，以此類推。 - 2、Markdown 中的粗體強調對應著 HTML 中的
<strong>標籤。 - 3、Markdown 中的斜體強調對應著 HTML 中的
<em>標籤。 - 4、Markdown 中的刪除線對應著 HTML 中的
<del>標籤。 - 5、Markdown 中的下劃線對應著 HTML 中的
<u>標籤。
如果你對文字顯示效果有更多的要求，可以試一下 HTML 中的<font>標籤，因為<font>可以同時規定文字的字型、大小和顏色。
示例一下 HTML 中有文字上標、下標和鍵盤標籤（截自 MarkdownPad2）：
5.2、內容排版類標籤
Markdown 語法與 HTML 中內容排版類標籤的對應關係：
- 1、Markdown 中的行內程式碼塊對應著 HTML 中的
<code>標籤。 - 2、Markdown 中的多行程式碼塊對應著 HTML 中的
<pre>標籤。 - 3、Markdown 中的有序列表對應著 HTML 中的
<ol><li>標籤。 - 4、Markdown 中的無序列表對應著 HTML 中的
<ul><li>標籤。 - 5、Markdown 中的引用對應著 HTML 中的
<blockquote>標籤。 - 6、Markdown 中的分割線對應著 HTML 中的
<hr>標籤。 - 7、Markdown 中的表格對應著 HTML 中的
<table>標籤。
HTML 中有很多排版標籤，比如換行標籤<br/>，甚至還可以在 HTML 中嵌入 CSS 程式碼，比如通過text-align來實現文字對齊，通過text-indent來實現文字縮排等。
示例一下 CSS 的居中和縮排（截自 MarkdownPad2）：
5.3、圖片及多媒體標籤
Markdown 中的圖片連結會被轉換成 HTML 中的<img>標籤。圖片連結是 Markdown 中最酷的功能之一，因為從沒有任何一個工具能如此方便的將圖片嵌入到文件之中，而 Markdown 做到了。但便捷的同時，也意味著功能的欠缺，除了title以外，無法再為圖片連結設定其它任何屬性，所以轉換後的<img>的樣式也是預設的。
如果要實現更好的圖文混排效果，也可以直接在 Markdown 中輸入<img>並自由指定想要的屬性。比如通過align指定圖片對齊方式，通過width指定圖片寬度，通過height指定圖片高度，通過border指定圖片邊框等。
示例一下圖片居中和加框（截自 MarkdownPad2）：
不僅可以在 Markdown 中直接用<img>標籤，還可以用<audio>和<video>等多媒體標籤。比如通過<video>來嵌入一個視訊：
示例一下，輸入文字如下：
<video height="360px" width="640px" controls>
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm" type="video/webm">
</video>顯示效果如下：
5.4、錨元素（A 標籤）
Markdown 中的文字連結和引用連結最終都會被轉化為 HTML 中的 A 標籤。在 HTML 中，A 標籤的作用是建立通向其他網頁、檔案、同一頁面內的位置、電子郵件地址或任何其他 URL 的超連結。Markdown 的連結實現了 A 標籤最基礎的功能，但有兩個常用的特性尚未充分支援，分別是頁內跳轉和target屬性。
頁內跳轉功能也叫錨點定位。錨點是超連結的一種，能夠直接定位到頁面內的某個部分，因此也叫內部連結或頁內超連結。在網路上，錨點的應用十分普遍，如跳轉到同一頁面內不同的位置、跳轉到其他頁面的特定位置、文章目錄等。
錨點的實現方式有三種，由於不方便演示，這裡我僅給出實現的程式碼，有興趣的朋友可拷貝程式碼進行嘗試。
方式一：通過id屬性實現。即把目標位置標籤的id屬性值寫到 A 標籤的href屬性的末尾。這種方法可以定位到任何型別的 HTML 標籤，比較常用的標籤有<h>、<a>、<div>、<span>、<font>等等。
<a href="url#錨點名稱">跳轉連結的文字</a>
<h2 id="錨點名稱">目標位置的文字</h2>方式二：通過name屬性實現。即把目標位置標籤的name屬性值寫到 A 標籤的href屬性的末尾。這種方法只適用於 A 標籤。
<a href="url#錨點名稱">跳轉連結的文字</a>
<a name="錨點名稱">目標位置的文字</a>方式三：通過 js 指令碼實現。
<a href="javascript:void(0)" onclick="document.getElemetnById('anchor').scrollIntoView(true);return false;"></a>
<div id="anchor"></div>在 Markdown 中定義一個帶錨點的連結的格式是[description](url#anchorName)，如果不寫url部分，那麼url預設就會是當前頁的連結，換句話說，該連結就成了一個內部連結。
由於目前很多部落格依然不支援 Markdown 的TOC擴充套件，所以我們只好結合 HTML 的錨點和 Markdown 的內部連結，來手動實現博文的目錄功能。
A 標籤的target屬性用於指定在何處開啟連結資源。如果target的值為_blank，則表示在新的視窗開啟連結；如果不給target指定值，那麼target的預設值就是_selft，表示在當前視窗中開啟連結。
而 Markdown 的連結轉換成的 A 標籤時預設都不帶target屬性，這也就意味著 Markdown 語法本身不支援連結在新視窗中開啟。要實現在新視窗中開啟連結的效果，只能直接用 A 標籤，然後把target屬性的值指定為_blank。
如要在新視窗中開啟部落格園首頁，示例一下，輸入文字如下：
<a target="_blank" href="https://www.cnblogs.com/">部落格園首頁</a>顯示效果如下：
部落格園首頁
6、總結
本文進一步介紹了幾種 Markdown 擴充套件語法，並著重介紹瞭如何在 Markdown 中使用 HTML 和 CSS。
在實際寫作過程中，如果想要用 HTML 標籤，那麼直接在 Markdown 編輯器中用就是了。尤其是行內元素，幾乎可以自由的放在 Markdown 中的任何位置（目前發現程式碼塊中不行）。唯一需要注意的是，最好在塊級元素的上下留出至少一個空行，否則可能會有顯示問題。另外，不能把 Markdown 語法放到塊級元素中。
本文連結：http://www.cnblogs.com/hanzongze/p/markdown-xhtml.html
版權宣告：本文為部落格園博主 韓宗澤 原創，作者保留署名權！歡迎通過轉載、演繹或其它傳播方式來使用本文，但必須在明顯位置給出作者署名和本文連結！個人部落格，能力有限，若有不當之處，敬請批評指正，謝謝！