hexo搭配mathjax注意事项

2020-08-22

字数统计: 542字 | 阅读时长≈ 2分

hexo + yilia-plus + mathjax 显示数学公式

1. 使用 Kramed 代替 hexo 自带的 Marked

1 2	npm uninstall hexo-renderer-marked --save npm install hexo-renderer-kramed --save

更改/node_modules/hexo-renderer-kramed/lib/renderer.js

function formatText(text) {
    // Fit kramed's rule: $$ + \1 + $$
    return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
}

为

1
2
3

function formatText(text) {
    return text;
}

2. 停止使用 hexo-math 并安装 mathjax

如果你已经安装 hexo-math, 请卸载它,然后安装 hexo-renderer-mathjax 包

1 2	npm uninstall hexo-math --save npm install hexo-renderer-mathjax --save

注意： 由于一些原因，当使用yilia-plus主题时，使用mathjax会报错，如果仍要使用mathjax，根据 yilia-plus作者 JoeyBling提供的解决方案，需要进入 node_modules/hexo-renderer-mathjax文件夹执行如下代码：

1
2
3

npm uninstall ejs -S
# 安装最新版ejs
npm i ejs@latest -S

3. 更改默认转义规则

因为 hexo 默认的转义规则会将一些字符进行转义，所以我们需要对默认的规则进行修改.
对文件 node_modules/kramed/lib/rules/inline.js 参考半路出家的coder进行如下更改：

escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
//修改为
escape: /^\\([`*\[\]()# +\-.!_>])/,

em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
//修改为
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

我只是修改了上面的 em 项，这一项好像对应的是行内公式转义问题，我没有更改 escape 项，可以正常显示。

4. 配置 Mathjax

在文件 node_modules\hexo-renderer-mathjax\mathjax.html 中添加如下一行代码：

1	<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

注意，我之前查了很多网上的 hexo 配置 Mathjax 的文章，它们在该文件中加入的代码通常是

1	<script type="text/javascript" async src="cdn.mathjax.org/mathjax/latest/MathJax.js"></script>

但是这行代码仅在本地（即执行hexo s时）可以渲染 tex 数学公式，但是部署到 github 后就不能渲染 tex 数学公式了，所以强烈推荐使用第一种代码，这是Mathjax官网给出的url。

最后在你使用的主题中添加

mathjax: 
  enable: true
  # 是不是没页都使用mathjax
  perpage: false

最后执行

1
2
3

hexo clean
hexo g
hexo d

这时打开博客就能看到渲染效果了，渲染很快哦。

本文作者： 程序猪-渔枫
本文链接： https://over-shine.github.io/2020/08/22/hexo搭配mathjax注意事项/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！