一键解决 Hexo 中的 Latex 公式渲染冲突问题

通过 Hexo 的 filter 自动添加 {%raw%} 和 {%endraw%} 的方式无痛解决一切公式渲染冲突问题~

TL;DR，太长不看

适用场景：出现如上图所示情况，Hexo 博客里的某些公式显示正常，而某些公式没有成功渲染。

解决方法：

1. 手动解决（不推荐）：手工在不正常的公式两头添加 {%raw%} 和 {%endraw%} 。适合公式不多的场合。

2. 在根目录 scripts 目录下（如果没有需要建一个）的合适位置新建一个 js 脚本，输入以下内容（文本版^[5]），实现自动添加：

   

3. 懒人插件^[4]（推荐）：

   # 如果你用的 NPM
   npm i hexo-filter-ignore-formula-rendering
   
   # 如果你用的 Yarn
   yarn add hexo-filter-ignore-formula-rendering

问题和原因

Hexo 使用 Markdown 和 Nunjucks 渲染博客，而 Markdown 的某些语法会和 Latex 公式语法冲突，比如字符 _ 在两个渲染器语法中均有定义。这就导致了一些复杂的公式会被 Markdown 引擎预渲染而导致 Latex 渲染器渲染失败。

网上存在的方法大多是修改 Mardown 引擎来解决这个问题（比如更换为 Kramed 引擎或者魔改源码）。由于我是用 CI 部署博客的，这种修改源码的方式着实不太方便自动部署，而且修改还会带来一些额外的限制，比如需要在写公式时某些特定的写法。于是想着能不能从渲染上想办法解决。

通过查阅文档发现，Nunjucks 中存在一个 raw 标签^[1]，具体来说，包裹在 {%raw%} 和 {%endraw%} 里的内容都会被作为纯文本输出。因此我们只需要在有问题的公式两端加上 raw 标签就好了！试了下，果然有用。

不过一个个手动加有点麻烦，而且这会导致我们的博文 markdown 源码文件里面多一些不好看的符号，那能不能让 Hexo 自动给我们添加标签呢？

答案是可以的，查阅 Hexo 文档^[2]，发现 Hexo 的渲染过程是先执行 before_post_render 过滤器，然后进行 Markdown 和 Nunjucks 渲染。所以我们可以自己写个 before_post_render 过滤器，实现上面的想法。

在根目录 scripts 目录下（如果没有需要建一个）的合适位置新建一个 js 脚本，输入以下内容（文本版^[5]）：

如代码所示，就是写了个简单的正则表达式，寻找源码中的所有公式内容，然后在两头添加上 raw 标签。

效果如下，问题解决！

打包成插件

看了下 hexo-filter-auto-spacing^[3]的源码，发现为 Hexo 写个插件还是挺简单的，于是就花了一点时间把上面的代码打包成插件^[4]。

已经发布到 npmjs 上了，现在只需要：

# 如果你用的 NPM
npm i hexo-filter-ignore-formula-rendering

# 如果你用的 Yarn
yarn add hexo-filter-ignore-formula-rendering

就能一键解决 Hexo 中的 Latex 公式渲染冲突问题啦~

---

Reference

[1]nunjucks#raw↩

[2]Hexo#Render↩

[3]hexo-filter-auto-spacing↩

[4]hexo-filter-ignore-formula-rendering↩↩

[5]index.js↩↩