美化 Typecho 開發版 MarkDown 的腳註

話說這兩天明月終於搞明白了 Typecho 開發版使用的 MarkDown 解析器是 HyperDown{注1}，主要運用在 SegmentFault{注2} 開發者社區（大家在SF里發表文章和評論時用的編輯器就是HyperDown解析器的 MarkDown 語法。）

HyperDown 支持的 MarkDown 語法，大家可以參考【Typecho 開發版支持的原生 MarkDown 語法】一文，我已經在這裡作何很詳細的匯總和驗證。

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

好了，不廢話了，說正題吧。在 MarkDown 語法的「享受」過程中，發現 MarkDown 在文章里添加腳註{注3}實在是太方便了，這可是專業文字處理辦公軟體才有的技能哦，在 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">{注$id}</a></sup>"

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

然後再 Typecho 當前使用的主題里添加如下的自定義美化CSS代碼：

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

至此全部搞定，這時候再看看文章里添加的 MarkDown 腳註是不是變的跟我的一樣美觀了。

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

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

推薦閱讀：