话说这两天明月终于搞明白了 Typecho 开发版使用的 MarkDown 解析器是 HyperDown1,主要运用在 SegmentFault2 开发者社区(大家在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 脚注*/
.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解析器支持脚注一文,特此声明。
20 条评论
我看不错噢谢谢!
支持一下。。。
这等级就离谱
我想问下那个超链接后面的箭头是怎么来的,我用原始的md好像没有显示
带箭头链接我自己魔改了,有需要的话可以去看看,魔改教程【https://itcats.me/typecho/8.html】
哦,好的!谢谢!
箭头?那应该是主题自带CSS代码实现的!
请问您的图片居中是如何做的呀
自定义CSS实现的!
但是你页面头部有固定定位的 header 部分,脚注的来回跳转链接定位位置会被盖住。
不知道我说没说明白,就是你点「注1」,本来应该是跳转到恰好看到注1内容的位置,但是现在会被顶部的导航条盖住,恰好看不到。
多谢提醒,这个可能是主题的小BUG了吧!
哦,是导航固定给遮挡了!
首页那个评论显示不错,和112导航的效果差不多
是的,一直是我梦寐以求的一个功能,现在终于在 Typecho 上实现了!
自定义CSS添加到主题哪个位置好吖
放到你主题自定义CSS的地方!
自定义CSS代码添加在那个位置好呢?文章页吗?还是其他的
这个一般主题都有放自定义代码的后台设置的!
感觉很高端嘛。
呵呵,可读可写的编撰方式!