美化 Typecho 开发版 MarkDown 的脚注
话说这两天明月终于搞明白了 Typecho 开发版使用的 MarkDown 解析器是 HyperDown1，主要运用在 SegmentFault2 开发者社区（你们在SF里发表文章和评论时用的编辑器就是HyperDown解析器的 MarkDown 语法。）php
HyperDown 支持的 MarkDown 语法，你们能够参考【Typecho 开发版支持的原生 MarkDown 语法】一文，我已经在这里做何很详细的汇总和验证。css
由于知道了 Typecho 的 MarkDown 语法解析器是谁了，因此对 MarkDown 语法的支持也就很清晰了。因而，明月最近的文章里开始更多的使用 MarkDown 语法来撰写，不得不说 MarkDown 真的好强大，强大到写一篇技术性的博客文章居然是中“享受”。html
好了，不废话了，说正题吧。在 MarkDown 语法的“享受”过程当中，发现 MarkDown 在文章里添加脚注3实在是太方便了，这但是专业文字处理办公软件才有的技能哦，在 MarkDown 语法里几个标记就能够成功了，真实太强大了。就是有个小瑕疵 HyperDown 的脚注用的是纯阿拉伯数字看着很单薄的样子，习惯上来讲咱们中文的脚注符号更加的直观。以下图；git
为了实现这个效果，就得修改一下 HyperDown 解析器的PHP源码了，再加上个自定义的CSS美化便可；github
修改 Typecho 根目录下 /var/HyperDown.php 里大约在343行（也有人说是295行，这个可能跟使用的HyperDown版本有关系）以下代码：web
"<sup id=\"fnref-{$id}\"><a href=\"#fn-{$id}\" class=\"footnote-ref\">{$id}</a></sup>"编辑器
修改成typecho
"<sup id=\"fnref-{$id}\"><a href=\"#fn-{$id}\" class=\"footnote-ref\">{注$id}</a></sup>"学习
便可，其实就是加了个中文脚注的转义符注而已。spa
而后再 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解析器支持脚注一文，特此声明。