潜心的博客

vuepress中使用数学公式vuepress-plugin-mathjax

2022-7-19 vuepressvuepress-plugin-mathjax

在之前的文章vuepress中使用数学公式markdown-it-katex中，使用插件markdown-it-katex可以显示数学公式，但部分无法显示，如\pmod。之后又发现css文件找不到，直接无法显示了，所以这次使用vuepress-plugin-mathjax插件来展示数学公式，即解决方法(二)。


# 解决方法(一)

对于找不到css文件的问题，可以把对应的css文件下载到本地的.vuepress/public/css文件夹里，然后修改config.js文件

[
    'link',
    {
        rel: 'stylesheet',
        href: '/css/katex_v0.7.1.min.css' // https://github.com/KaTeX/KaTeX/releases/tag/v0.7.1
        // href: 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css'
    }
],
    [
    'link',
    {
        rel: "stylesheet",
        href: '/css/github-markdown_v2.10.0.css'  // https://github.com/sindresorhus/github-markdown-css/releases/tag/v2.10.0
        // href: "https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css"
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 解决方法(二)

安装插件vuepress-plugin-mathjax：vuepress/vuepress-plugin-mathjax: Use TeX in VuePress. (github.com) (opens new window)

yarn add -D vuepress-plugin-mathjax
1

修改config.js文件

module.exports = {
    plugins: [
        [
            'vuepress-plugin-mathjax', {}
        ]
    ]
}
1
2
3
4
5
6
7

这个插件的不足之处在于，它存在一个函数

function isWhitespace (char) {
  return char === ' ' || char === '\t' || char === '\n'
}
1
2
3

会去判断$和$$包含的数学公式起始和结束是否为空格、制表符或回车，如果是，则无法显示，但在typora中是可以显示的

如$ a$无法显示，结果为$ a$

主要的影响是公式块，下面这个公式块，在typora中是居中显示

$$
f(x) = x + 1
$$
1
2
3

这个插件无法渲染，只能原样显示 $$ f(x) = x + 1 $$ ，解决方法：

$$f(x) = x + 1$$
1

这样的结果就是在typora中是左对齐，在网页是正常显示且居中对齐

主页模板