美化 Typecho 開發版 MarkDown 的腳註

　　話說這兩天明月終於搞明白了 Typecho 開發版使用的 MarkDown 解析器是 HyperDown¹，主要運用在 SegmentFault² 開發者社區（你們在SF裏發表文章和評論時用的編輯器就是HyperDown解析器的 MarkDown 語法。）

　　 HyperDown 支持的 MarkDown 語法，你們能夠參考【Typecho 開發版支持的原生 MarkDown 語法】一文，我已經在這裏做何很詳細的彙總和驗證。

　　由於知道了 Typecho 的 MarkDown 語法解析器是誰了，因此對 MarkDown 語法的支持也就很清晰了。因而，明月最近的文章裏開始更多的使用 MarkDown 語法來撰寫，不得不說 MarkDown 真的好強大，強大到寫一篇技術性的博客文章居然是中「享受」。

　　好了，不廢話了，說正題吧。在 MarkDown 語法的「享受」過程當中，發現 MarkDown 在文章裏添加腳註³實在是太方便了，這但是專業文字處理辦公軟件纔有的技能哦，在 MarkDown 語法裏幾個標記就能夠成功了，真實太強大了。就是有個小瑕疵 HyperDown 的腳註用的是純阿拉伯數字看着很單薄的樣子，習慣上來講咱們中文的腳註符號更加的直觀。以下圖；

　　爲了實現這個效果，就得修改一下 HyperDown 解析器的PHP源碼了，再加上個自定義的CSS美化便可；

　　修改 Typecho 根目錄下 /var/HyperDown.php 裏大約在343行（也有人說是295行，這個可能跟使用的HyperDown版本有關係）以下代碼：

"<sup id=\"fnref-{$id}\"><a href=\"#fn-{$id}\" class=\"footnote-ref\">{$id}</a></sup>"

　　修改成

"<sup id=\"fnref-{$id}\"><a href=\"#fn-{$id}\" class=\"footnote-ref\">{&#27880;$id}</a></sup>"

　　便可，其實就是加了箇中文腳註的轉義符注而已。

　　而後再 Typecho 當前使用的主題裏添加以下的自定義美化CSS代碼：

/*美化 MarkDown 腳註*/
.fn a:hover{
    color: #f00;
}
.footnotes ol {
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    padding-left: 20px;
    display: block;
   font-size: 14px;
}
.footnotes ol li{
list-style-type: decimal;
}

　　至此所有搞定，這時候再看看文章裏添加的 MarkDown 腳註是否是變的跟個人同樣美觀了。

　　本文的主要思路和代碼借鑑和轉載了【Me.He博客】的修改typecho的md解析器支持腳註一文，特此聲明。

---

1. HyperDown 是爲 SegmentFault 專門編寫的 MarkDown 解析器 Github地址。 ↩
2. SegmentFault ( www.sf.gg ) 是中國領先的開發者社區。咱們但願爲中文開發者提供一個純粹、高質的技術交流平臺，與開發者一塊兒學習、交流與成長，創造屬於開發者的時代！ ↩
3. 腳註，是漢語詞彙，漢語拼音爲就是能夠附在文章頁面的最底端的，對某些東西加以說明，印在書頁下端的註文。腳註和尾註是對文本的補充說明。腳註通常位於頁面的底部，能夠做爲文檔某處內容的註釋；尾註通常位於文檔的末尾，列出引文 的出處等。 ↩