解锁数学之美：VuePress博客如何优雅地呈现复杂公式

聊聊如何让 VuePress 显示数学公式块。

‍

什么是数学公式块

如果你还不了解，可以先看看我的 Markdown 教程——Markdown 与数学公式。

‍

‍

安装依赖

相关插件有很多，我这里选择的是 markdown-it-mathjax3​：

npm i markdown-it-mathjax3

‍

‍

配置

在 config.ts 里配置（看 plugins 里的配置）：

module.exports = {
  // 省略其他配置
  markdown: {
    lineNumbers: true,
    extractHeaders: ["h2", "h3", "h4"],
    externalLinks: { target: '_blank', rel: 'nofollow noopener noreferrer' },
    plugins: [
      'markdown-it-mathjax3'
    ]
  }
  
}

‍

效果

效果当然就是能正常渲染公式块了，参考我的 Markdown 教程——Markdown 与数学公式，里面有很多数学公式。

‍

‍

‍

注意

注意：$​ 和公式之间不能有空格，例如这样的写法是不能正常渲染的（末尾的 a​ 和 $​ 有空格）：

$\alpha $

‍

‍

参考

vdoing 主题微信群的群友指导

Markdown 增强插件

markdown-it-mathjax3 插件

markdown-it-katex 插件

‍