给Hexo主题添加LaTeX公式支持

问题

使用Markdown写笔记或者文章免不了会遇到一些数学公式，许多优秀的Markdown编辑器可以完美地支持Latex书写数学公式。然而，Hexo默认是不支持识别$$ \LaTeX $$语法的。纵然有很多完善的主题，比如Next，支持了inline和block的$$ \LaTeX $$语法，但是想在让自己喜欢的主题中正确显示数学公式就需要我们自己动手了。

解决方法

安装Mathjax

首先你要确认你的主题中是否使用了Mathjax, 最便捷的方法是看下你主题的Readme，然后按照说明开启Mathjx支持。一般完善的主题还会有一些额外的设置，例如需不需要对每个文章都开启Mathjax支持，或者更换CDN之类的，这些应该都可以在Readme里找到。在你的主题的_config.yml文件搞定相关的配置项。

但是，我的博客使用的Archer主题就没有使用Mathjax，这种情况我们就自己动手吧。

在themes/Your-Theme-Name/layout/下新建文件mathjax.ejs：

<% if (theme.mathjax.enable){ %>
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
          tex2jax: {
            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
            processEscapes: true
          }
        });
      </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
            tex2jax: {
              skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
            }
          });
      </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
              var all = MathJax.Hub.getAllJax(), i;
              for(i=0; i < all.length; i += 1) {
                  all[i].SourceElement().parentNode.className += ' has-jax';
              }
          });
      </script>

    <script type="text/javascript" src="<%- theme.mathjax.cdn %>"></script>
<% } %>

在主题的_config.yml文件末尾添加：


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

修改themes/Your-Theme-Name/layout/post.ejs, 在文件的<main>标签块中加入：
1
2
3
<% if (page.mathjax == true){ %>
<%- partial('mathjax') %>
<% } %>
最后，在你需要写Latex的文章Markdown头部添加：
1
mathjax: true

到这里我们就自己添加了Mathjax。只会在文章头部有mathjax: true时，启用Mathjax。

如果你之前使用了hexo-math，请记得卸载，因为我们下面会替换渲染引擎，所以并不需要它。

1	npm uninstall hexo-math

替换渲染引擎

Hexo默认使用hexo-renderer-marked来渲染Markdown，但是这个渲染器在解析$$\LaTeX$$语法的时候会和Markdown本身的语法符号产生冲突。网上有很多解决冲突的办法，有的需要手动修改一些js文件，有的需要手动转义。这里我推荐最便捷的方法是直接换一个渲染器。下面两个渲染器可以二选一：

Pandoc

hexo-renderer-pandoc, 很强大的解析器，但是在语法上会有更为严格的约束，Typora编辑器使用的就是Pandoc的语法。

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

Pandoc解析器需要安装额外的二进制文件，如果使用的是MacOS，brew install pandoc可以一步到位。对所有操作系统，官网都有完整的安装说明。

Kramed

hexo-renderer-kramed, fork了marked解析器，改了一部分bug，但是在解析冲突上还是会有小问题。

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

Pandoc解析器是很棒的，不幸的是在我的主题上的表格样式因为这个解析器出了一点问题。对前端不太熟悉的我也暂时定位不到问题在哪，于是退而求其次，目前这篇文章就是通过kramed解析出的。目前还没有遇到问题。

尾巴

测试一下 $$ \LaTeX $$ Block：
$$
J(\theta)=-\frac{1}{m}\sum_{i=1}^{m}{[y^{(i)}\cdot log(h_{\theta}(x^{(i)}))+(1-y^{(i)})\cdot log(1-h_{\theta}(x^{(i)}))]+\frac{\lambda}{2m}\sum_{j=1}^{n}\theta_j^2}
$$
看起来还是不错的。如果你用桌面端浏览还可以右键公式，会有一些Mathjax的设置菜单。

但是在移动端上，行间长公式可能会显示不全，在公式的空白处长按也会有菜单（需要一定技巧…），然后选择 Math Settings > Zoom Trigger > Double-Click，这样设置后双击公式会出现放大的弹窗，左右滑动可以正常看到整个公式了。

推荐使用Typora编写Markdown文档，它对于数学公式的支持非常棒。独特的编写模式体验也非常好，另外它在导出到其它格式时也用到了Pandoc，它本身自动格式化出的语法格式也是符合Pandoc要求的。

参考文章：

hexo支持mathjax

在Hexo中渲染MathJax数学公式

Let Hexo Support Mathjax

推荐订阅源

Xudong's Blog

问题