添加 markdown 脚注功能

之前在写文章时，我想使用脚注功能，但按照 markdown 的语法写了脚注后发现并没有效果。

于是我查找相关资料，发现 vitepress 并不支持脚注功能。

然后我在官网上找到了 markdown-it 的所有插件，并发现了适用于脚注的 markdown-it-footnote 插件。

最终我在 vitepress 的配置文件中添加了该插件，成功地实现了脚注功能。

现在记录一下实现过程:

在官网找到合适的插件

打开:VitePress, 点击markdown-it，进入到markdown-it的官网。对其他插件感兴趣的朋友,可以自行浏览其他插件,这里主要介绍脚注插件。

安装以及配置插件

pnpm

pnpm add markdown-it-footnote

yarn

yarn add markdown-it-footnote

npm

npm add markdown-it-footnote

安装完毕后,我们根据 Vitepress 的文档,引入插件并配置

// docs/.vitepress/config.ts
import { defineConfig } from 'vitepress'
import nav from '../nav'
import sidebar from '../sidebar'
const anchor = require('markdown-it-footnote') 

export default defineConfig({
  markdown: {
    lineNumbers: true, // 显示代码块行号
    config: md => {
      md.use(require('markdown-it-footnote')) 
    },
  },
})

到目前为止,我们已经完成了脚注插件的安装以及配置,接下来我们就可以在文章中使用脚注了。

默认的样式不是很好看,而且也因为自己修改了全局样式产生了一些 BUG,所以还需要对样式进行一些修改。

// docs/.vitepress/config.ts
import { defineConfig } from 'vitepress'
import nav from '../nav'
import sidebar from '../sidebar'
const anchor = require('markdown-it-footnote') 

export default defineConfig({
  markdown: {
    lineNumbers: true, // 显示代码块行号
    config: md => {
      md.use(require('markdown-it-footnote')) 
      md.renderer.rules.footnote_anchor = function render_footnote_anchor(tokens, idx, options, env, slf) {
        let id = slf.rules.footnote_anchor_name?.(tokens, idx, options, env, slf)
        if (tokens[idx].meta.subId > 0) {
          id += ':' + tokens[idx].meta.subId
        }
        return ' <a href="#fnref' + id + '" class="footnote-backref">👈🏻</a>'
      }
    },
  },
})

在全局样式里,对脚注的样式做一些调整

/* docs/.vitepress/theme/global.css */
/* 脚注超链接样式修正 */
.footnote-backref,
.footnote-ref a {
  padding-right: unset !important;
}

.footnote-item {
  font-style: italic;
  font-weight: bold;
}

示例: 本次写作,参考了 Vitepress^[1] 官方文档,markdown-it^[2] 官方文档,以及 markdown-it-footnote^[3] 插件的文档。

这样的话, 就大功告成了!

---

1. VitePress 👈🏻

2. markdown-it 👈🏻

3. markdown-it-footnote 👈🏻