Hexo使用mathjax渲染公式

最近有在博客中嵌入公式的需求，目前主要有两个数学公式渲染引擎mathjax和KaTeX，前者应用更广泛，支持的语法更全面，因此这里简述将mathjax整合到hexo。

1. 替换Markdown渲染器

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

hexo-renderer-karmed渲染器fork自hexo-renderer-marked，对mathjax的支持更友好，特别是下划线处理(marked会优先将_之间的内容斜体转义)

2. 挂载mathjax脚本

在主题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=theme.cdn.mathjax + "/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

如果用的是jade模板，则添加mathjax.jade:

//mathjax config similar to math.stackexchange
script(type="text/x-mathjax-config").
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    }
  });
script(type="text/x-mathjax-config").
  MathJax.Hub.Config({
    tex2jax: {
      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    }
  });
script(async, type="text/javascript", src=theme.cdn.mathjax + '/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML')

在_partial/after_footer.ejs中添加:

<% if (page.mathjax){ %>
<%- partial('mathjax') %>
<% } %>

如果是jade模板，则在_partial/after_footer.jade中添加:

if page.mathjax == true
  include mathjax

3. 配置

在主题_config.yml中配置mathjax cdn:

cdn:
    mathjax: https://cdn.mathjax.org

当需要用到mathjax渲染器时，在文章头部添加mathjax:true:

layout: post
mathjax: true
...

只有添加该选项的文章才会加载mathjax渲染器。

4. 支持mathjax的Markdown编辑器:

• Qute 原生支持mathjax，界面有点Geek。

• Macdown: Macdown原生不支持mathjax，在md文件中添加(注意https，Macdown为了安全，只会加载https的远程脚本):

    <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
            displayMath: [ ['$$','$$'], ["\\[","\\]"] ],},
        TeX: {equationNumbers: {
            autoNumber: "AMS"
          },Augment: {  Definitions: {
           macros: {
             overbracket:  ['UnderOver','23B4',1],
             underbracket: ['UnderOver','23B5',1],
           }
         }}},
    });
    </script>
  

5. 示例:

行内公式: $$ a+b=c $$

行间公式:

$$
\left( \begin{array}{ccc}
a & b & c \\
d & e & f \\
g & h & i
\end{array} \right)
$$

得到:

行内公式: $ a+b=c $

行间公式:

$$\left( \begin{array}{ccc} a & b & c \\ d & e & f \\ g & h & i \end{array} \right)$$

具体mathjax语法，这里有一篇不错的博客。