Hexo下Next主题美化(一)数学公式的渲染

前言

写技术博客经常遇到数学公式的编辑，使用Hexo+Github搭建的博客，在本地写的博客都是md格式的，因此我们需要一些操作，来渲染我们在Markdown上编辑的数学公式。

更换markdown渲染引擎

我们把markdown的渲染引擎由marked改为更为轻量级的kramed

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

你可以在/node_modules里面搜索一下你是否安装了这两个插件

（注意：不要安装pandoc插件，如果有，请卸载

$ npm uninstall hexo-renderer-pandoc --save

笔者因为这个插件而导致了node端口被占用出现node.js:141报错，当初查了很久也没找到原因，后来把这个插件一卸载就好了。。。）

接下来找到/node_modules/kramed/lib/rules/inline.js把第11行的escape变量的值做相应的修改：

//  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  escape: /^\\([`*\[\]()#$+\-.!_>])/,

这一步是在原基础上取消了对\,{,}的转义(escape)。

同时把第20行的em变量也要做相应的修改。

//  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

打开Mathjax开关

在next主题中打开mathjax开关：/theme/next/_config.yml 把enable改为true

# MathJax Support
mathjax:
  enable: true
  per_page: true
  cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML

还需要在文章的Front-matter里打开mathjax开关，如下：

title: xxxx
date: 2018-02-01 16:22:31
tags: xxxxx
mathjax: true

在文章开头设置mathjax开关，只有需要编辑数学公式的文章页面才加载mathjax渲染，这样不需要渲染数学公式也不会影响加载速度。

假如你不想每篇文章都手动打上mathjax: true，那么你可以在/scaffolds/post.md中修改，添加上mathjax这一项：

---
title: {{ title }}
date: {{ date }}
tags:
mathjax:
---

这样你每次写博客时Front-matter都会有这一项(实际上我们修改的就是博客Front-matter的模板)

显示数学公式序号

我们经常需要对行间公式编序号，这样会方便我们的语言叙述(可能是习惯于$\LaTeX$)，要在我们博客上显示序号，只需要下面的操作：

在/theme/next/layout/_third-party/mathjax.swig中加上下面这段代码

<script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        TeX: { equationNumbers: { autoNumber: "AMS" } }
      });
 </script>

然后在markdown的tex公式编辑里面只要使用equation环境的公式就会被编号

\begin{equation}
\end{equation}