hexo中启用mathjax的方式

hexo中如何正确使用mathjax

今天我在使用hexo写博客的时候，惊讶的发现md文档写的mathjax公式在vscode编辑器上预览是可以正常显示的，但是在部署到博客上时却未能正确显示，按照如下5个步骤操作，即可实现

部署步骤

一、使用 kramed 代替 marked

hexo默认使用hexo-renderer-marked引擎去渲染网页，它会把利用Markdown语法写的文本去转换为相应的html标签。

在利用Markdown写MathJax公式的时候，经常会用到下划线_表示下标，但是下划线_会被hexo的默认引擎hexo-renderer-marked渲染成html中的<em>标签，表示斜体，

这样一来，我们写的MathJax公式就被错误渲染了，也就没办法正确显示出来。

• 卸载marked，改装kramed

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

• 更改相应的规则

找到根目录下的 /node_modules/hexo-renderer-kramed/lib/renderer.js 文件

找到以下内容

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

改为

// Change inline math rule
function formatText(text) {
  // Fit kramed's rule: $$ + \1 + $$
    return text;
}

二、使用 hexo-renderer-mathjax 代替 hexo-math

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

三、更新 Mathjax 的 CDN 链接

找到根目录下的 /node_modules/hexo-renderer-mathjax/mathjax.html 文件，将最后的 script 标签改成如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

四、更改默认转义规则

找到根目录下的 /node_modules/kramed/lib/rules/inline.js 文件

将第 11 行

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

改成

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

将第 21 行

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

改成

em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

五、开启mathjax

先打开主题的配置文件，以 next 主题为例，打开\theme\next\_config.yml，搜索mathjax，设置成如下：

mathjax:
    enable: true
    per_page: true
    cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML

在文章的 Front-matter 里打开 mathjax 开关

title: hexo中启用 mathjax 的方式
date: 2021-1-4
mathjax: true # 启用 mathjax

测试

md 文档中使用 mathjax 语法

$$F(n)=\frac{1}{\sqrt5}\left[\left(\frac{1+\sqrt5}{2}\right)^n-\left(\frac{1-\sqrt5}{2}\right)^n\right]$$

显示效果

$$F(n)=\frac{1}{\sqrt5}\left[\left(\frac{1+\sqrt5}{2}\right)^n-\left(\frac{1-\sqrt5}{2}\right)^n\right]$$

至此大功告成！