使 VuePress 支持公式
# 问题
由于有使用公式的需求，使用 VuePress1.x （Vdoing）时尝试过 vuepress-plugin-katex 和 vuepress-plugin-mathjax 等插件公式效果都不好。
# 解决方案
npm install @mdit/plugin-katex
1
VuePress 1.0 配置文件中填写：
import { katex } from '@mdit/plugin-katex'
export default defineConfig4CustomTheme<VdoingThemeConfig>({
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: {
extendMarkdown: (md) => {
md.use(katex);
md.linkify.set({ fuzzyEmail: false });
},
},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
VuePress 1.2 配置文件中填写：
import { katex } from '@mdit/plugin-katex'
export default defineUserConfig({
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支持数学公式
],
extendsMarkdown: (md) => {
md.use(katex);
md.linkify.set({ fuzzyEmail: false });
},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 参考文章
https://juejin.cn/post/7268216176412049462 (opens new window)
上次更新: 2025/07/05, 22:15:22