脚注是一种文本标注形式,通常用于在文中附加注释、补充说明、引用来源等信息。
个人习惯喜欢用markdown写文章,而我的个人博客网站的文章就是将markdown转html渲染后呈现的,文章存储还是保持原来的markdown格式,这样的好处是便于后期文章的修改以及再利用,并且采用实时渲染的方式,文章后期还可以修改样式(css样式)。
markdown脚注的语法是这样的:
这是一个关于脚注的示例[^1]。
---
[^1]: 这是实际的脚注内容。
昨天将自己开源的电子书搬迁到个人博客网站后,发现脚注不能正常显示,这很影响阅读体验。
于是GPT学习markdown的脚注用html代码怎么写,这是GPT给的例子:
<p>这是一个关于脚注的示例<sup><a href="#fn1" id="ref1">1</a></sup>.</p>
<div class="footnotes">
<hr />
<ol>
<li id="fn1">
<p>这是实际的脚注内容. <a href="#ref1" title="返回到文本">↩</a></p>
</li>
</ol>
</div>
这说明了,markdown的脚注是可以渲染成html的。
个人博客网站是用go语言开发的,markdown渲染成html使用的是blackfriday这个开源库,于是研究blackfriday支不支持脚注。这会靠GPT就解决不了问题了,GPT给的答案是:
input := []byte("这是一个关于脚注的示例[^1].\n\n[^1]: 这是实际的脚注内容.")
output := blackfriday.Run(input, blackfriday.WithExtensions(blackfriday.EXTENSION_FOOTNOTES))
fmt.Println(string(output))
即blackfriday.WithExtensions(blackfriday.EXTENSION_FOOTNOTES)
。但其实并没有blackfriday.EXTENSION_FOOTNOTES这个常量,并不是blackfriday库的版本问题。
虽然GPT给的答案有问题,但已经给出了思路,然后我顺着WithExtensions方法去看源码就找到了答案。
这是blackfriday支持的扩展选项,默认使用的是CommonExtensions,这是多个选项的组合,但是没有Footnotes,而根据GPT给的提示,Footnotes就是我们要找的选项。
所以解决方案是,调用blackfriday.Run方法时,自定义Extensions,在CommonExtensions的基础上,添加Footnotes,即blackfriday.WithExtensions(blackfriday.CommonExtensions|blackfriday.Footnotes)
。
例如:
unsafe := blackfriday.Run([]byte(content),
// 添加支持脚注
blackfriday.WithExtensions(blackfriday.CommonExtensions|blackfriday.Footnotes))
html := bluemonday.UGCPolicy().SanitizeBytes(unsafe)
效果如下:
可以看到,正文中的脚注标识符 [^1]
已经被转换为上标符号(sup标签)。并在文章底部创建了脚注列表,如下图。