美化 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 的脚注用的是纯阿拉伯数字看着很单薄的样子,习惯上来说我们中文的脚注符号更加的直观。如下图;

5.png

为了实现这个效果,就得修改一下 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>"

即可,其实就是加了个中文脚注的转义符&#27880;而已。

然后再 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 脚注是不是变的跟我的一样美观了。

6.png

本文的主要思路和代码借鉴和转载了【Me.He博客】的修改typecho的md解析器支持脚注一文,特此声明。


  1. HyperDown 是为 SegmentFault 专门编写的 MarkDown 解析器 Github地址
  2. SegmentFault ( www.sf.gg ) 是中国领先的开发者社区。我们希望为中文开发者提供一个纯粹、高质的技术交流平台,与开发者一起学习、交流与成长,创造属于开发者的时代!
  3. 脚注,是汉语词汇,汉语拼音为就是可以附在文章页面的最底端的,对某些东西加以说明,印在书页下端的注文。脚注和尾注是对文本的补充说明。脚注一般位于页面的底部,可以作为文档某处内容的注释;尾注一般位于文档的末尾,列出引文 的出处等。
最后修改:2017 年 10 月 25 日 09 : 10 AM
如果觉得我的文章对你有用,请随意赞赏

2 条评论

  1. 橘子书

    感觉很高端嘛。

    1. 明月登楼
      @橘子书

      呵呵,可读可写的编撰方式!

发表评论