Hexo 使用 MathJax 渲染公式并解决渲染冲突问题

  Hexo 是默认支持 mathjax 公式渲染的,但依然需要解决渲染冲突。

更改渲染引擎

  卸载默认渲染引擎并安装另一个:

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

  这里的安装可能出问题,可以先更新一下 npm 再安装(需要权限):

npm install -g npm

解决渲染冲突

  然后更改 /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) {
    return text;
}

  然后找到博客目录下的 /node_modules/kramed/lib/rules/inline.js
进行下列修改:

//escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,      第11行,将其修改为
escape: /^\\([`*\[\]()#$+\-.!_>])/,
//em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,    第20行,将其修改为
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

  上面的改动取消了公式中 _ 的渲染,原本会被渲染为 <em> 标签以表示斜体,在公式中表示下标。另外还取消了 \, {, } 的转义。

  此时出现在公式中下标和换行的问题就完美解决了。

使用 LATEX 编辑公式

  MathJax 是一个开源 JavaScript 库。它支持 LaTeX、MathML、AsciiMath 符号,可以运行于所有流行浏览器上。

  这里已经配置好了,我们只需要了解 LATEX 语法来书写公式就可以了。

  至于 LATEX 语法可参考: