markdown转html脚注问题怎么解决?

原创 吴就业 218 0 2024-02-25

本文为博主原创文章,未经博主允许不得转载。

本文链接:https://wujiuye.com/article/efe0135073874341bf89296ab3e1c461

作者:吴就业
链接:https://wujiuye.com/article/efe0135073874341bf89296ab3e1c461
来源:吴就业的网络日记
本文为博主原创文章,未经博主允许不得转载。

脚注是一种文本标注形式,通常用于在文中附加注释、补充说明、引用来源等信息。

个人习惯喜欢用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="返回到文本">&#8617;</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.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)

效果如下:

脚注被转换为sup标签

可以看到,正文中的脚注标识符 [^1]已经被转换为上标符号(sup标签)。并在文章底部创建了脚注列表,如下图。

在文章底部创建了脚注列表

#后端

声明:公众号、CSDN、掘金的曾用名:“Java艺术”,因此您可能看到一些早期的文章的图片有“Java艺术”的水印。

文章推荐

Go语言有前途吗?

做后台开发,不管是java还是go,都只是一门编程语言罢了,不会说做了5年的java后端研发,换成go就不会了吧,顶多花点时间学习一门语言和一些框架,把编码习惯变一变而已,在问题排查方面,需要重新学习一些工具而已。

新人成长路上,技术选型容易犯的错

技术人追求技术是好事,但应该把精力放在精益求精上,而不是追随潮流。没必要一味追求用一项技术,技术选型的目的就是选择各方面对比最适合的,这也包括开发成本、运维成本。

领导叫我做技术分享,如何做好一次技术分享?

领导找我做技术分享,我应该分享什么,以及如何做好技术分享?

写一个Java Agent我们都会遇到的问题

“编写一个Java Agent,这个Agent包的类不能跟应用程序的类冲突,所以我们需要自定义一个类加载器去加载我们Agent包里面的所有类,现在类冲突问题解决了,但是我Agent包也无法访问应用程序里面的类,这个问题怎么解?”

go依赖的module的版本号必须是"vx.x.x"的格式

报错:no matching versions for query "v1.0"。依赖的module的版本号必须是"vx.x.x"的格式,其中'x.x.x'中的'x'是数字。

jeprof命令报错:The first profile should be a remote form to use /pprof/symbol

jeprof命令报错:`The first profile should be a remote form to use /pprof/symbol`,这是因为命令需要程序源文件(原二进制文件)。另外`FATAL ERROR: Did not specify profile file`错误也是一样的问题。