Hexo的MathJax使用

2017-12-12#建站

前几天为了博客的LaTeX支持折腾了好一会，最后在综合了网上各种教程和群友的帮助后顺利解决了，这里记录一下具体操作。

1.安装Hexo的MathJax插件

在博客根目录下执行：

npm install hexo-math --save
hexo math install

据教程这样就能正常使用LaTeX，但我看了完全没有效果。如果你遇到了同样的问题可以参考下面的步骤。

2.在Blog页面插入对MathJax CDN script的引用

在你需要LaTeX支持的页面末尾添加如下代码

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

实测这样行间公式可以正常渲染。但行内公式无法读取，得知是MathJax插件没有提供$....$表示行内公式环境。需要手动配置。

3.配置MathJax的inline math

在你使用的Hexo的主题文件夹的/layout/_partial/目录下新建文件mathjax.ejs，输入以下内容

<!-- mathjax config similar to math.stackexchange -->

<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="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> 
</script>

保存后删除public文件夹再次 hexo generate 来使修改生效。

4.可能存在的兼容问题

Hexo源生的Markdown解释器可能会把 LaTeX 命令编译成MD语法例如把两个下划线之间的内容变成斜体。可以考虑更换解释器来解决这个问题：

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

以下为效果测试：

行内公式 $\sin^2 x =0.5$

行间公式

\gamma^2+e^{i\pi}=a_1+a_2+a_3

矩阵

R_x=\begin{pmatrix}1&0&0\\0&\cos\theta&-\sin\theta\\0&\sin\theta&\cos\theta\end{pmatrix}

P.S. 实际上这些步骤是有相互重叠部分的，比如有教程仅包含1或者2+3都成功实现了 $\LaTeX$ 的支持，但放我这就很神秘地不管用=。=如果你在操作中遇到问题，建议先查看MathJax的文档~~或者换篇教程看看~~

参考资料：