VuePress 数学公式支持

前言

博主在为 VuePress1.0 博客添加数学公式支持过程中遇到如下问题

问题一

在配置诸如 markdown-it-texmath,markdown-it-katex,markdown-it-mathjax3 这些插件后遇到

Error: Dynamic require of "XXX" is not supported

问题二

配置插件 vuepress-plugin-mathjax 成功，但是我发现此插件并不支持多行公式（也有可能是因为我的公式有错误，导致全部渲染失败，同样不符合要求）

方案

安装

npm install @mdit/plugin-katex

配置

VuePress 1.0 配置

import { katex } from '@mdit/plugin-katex'

export default defineConfig4CustomTheme<VdoingThemeConfig>({
	markdown: {
        extendMarkdown: (md) => {
          md.use(katex);
          md.linkify.set({ fuzzyEmail: false });
        },
  },    
})

VuePress 2.0 配置

import { katex } from '@mdit/plugin-katex'

export default defineUserConfig({
    extendsMarkdown: (md) => {
        md.use(katex);
        md.linkify.set({ fuzzyEmail: false });
    }, 
})

注意：博主使用博客主题为Vdoing，上述配置中某些代码和读者不同，请自行更改

样式

head: [
    [
      "link",
      {
        rel: "stylesheet",
        href: "https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css",
      },
    ], // 让md支持数学公式
    [
      "link",
      {
        rel: "stylesheet",
        href: "https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js",
      },
    ], // 让md支持数学公式
]

推荐阅读

Markdown 增强插件

参考文章

VuePress@next 使用数学公式插件

本文由博客一文多发平台 OpenWrite 发布！