Hexo中插入数学公式

本文主要记录用于渲染数学公式的两个插件：MathJax和Katex。

[toc]

使用MathJax

使用kramed代替marked

hexo 默认的渲染引擎是 marked，但是 marked 不支持 mathjax。 kramed是在 marked 的基础上进行修改。我们在工程目录下执行以下命令来安装 kramed.

~/博客根目录

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

然后，更改/node_modules/hexo-renderer-kramed/lib/下的renderer.js文件：

diff

// Change inline math rule
function formatText(text) {
-    // Fit kramed's rule: $$ + \1 + $$
-    return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
+    return text;
}
}

更改默认转义规则

因为 hexo 默认的转义规则会将一些字符进行转义，比如 _转为 <em>, 所以我们需要对默认的规则进行修改.

~/node_modules/kramed/lib/rules/inline.js

// 替换11行
-  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
//修改为
+  escape: /^\\([`*\[\]()# +\-.!_>])/,

//替换20行
-  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
//修改为
+  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

开启MathJax

设置_config.yml：

~/themes/next/_config.yml

mathjax:
- enable: false
+ enable: true
  perpage: false
  cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

修改post模板

~/scaffolds/post.md

title: {{ title }}
date: {{ date }}
tags:
    - 
categories: 
    - 
+ mathjax: false

文章需要渲染数学公式时改为true就行了。

使用Katex

使用markdown-it-plus代替marked

安装插件：

~/博客根目录

1 2	$ npm un hexo-renderer-marked --save $ npm i hexo-renderer-markdown-it-plus --save

配置

在主题配置文件里设置：

~/next/_config.yml

# Math Formulas Render Support
math:
  enable: true
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true #如果这个选项是false，那么每一个网页都会引入公式渲染，这是很浪费的，只需要在需要公式渲染功能的博文md文件的头部，添加一行`mathjax: true`(使用Katex引擎渲染也是在文件头部标记`mathjax: true`，表示支持公式)

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: false
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
  katex:
    enable: true
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

添加样式

在~/source/_data/head.swig文件里添加：

1	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css">

然后修改模板post.md，同上

简单语法

行内公式

两边各用一个$包裹起来：

1	$\sqrt{3x-1}+(1+x)^2$

$\sqrt{3x-1}+(1+x)^2$

多行公式

上下各用一个($$) 包裹起来：

$$
\begin{array}{c}

\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
= \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\

\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\

\nabla \cdot \vec{\mathbf{B}} & = 0

\end{array}
$$

$\begin{array}{c} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{array}$

南风