个人博客搭建之七：MathJax数学公式渲染

Posted on Edited on In , Changyan: Symbols count in article: 5.6k Reading time ≈ 5 mins.

参考：theme-next 官方文档之 Math Equations

通过修改 Next 主题配置文件_config.next.yml起用对数学公式的支持。选用MathJax渲染工具，并更改hexo默认的Markdown渲染引擎为hexo-renderer-pandoc，以更完美地支持数学公式。

公式的语法是广受欢迎的LaTex，示例了公式的编号、引用、对齐等常用操作。

配置代码

主题配置文件：_config.next.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Math Formulas Render Support
math:
  # Default (false) 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 true, it will load mathjax / katex script EVERY PAGE.
  every_page: false

  mathjax:
    enable: true
    # Available values: none | ams | all
    tags: none

  katex:
    enable: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

The every_page option controls whether to render Math Equations every page. 默认false，即公式的渲染按需提供，只会处理那些前面有 mathjax: true 的帖子。

1
2
3
4
---
title: Will Render Math
mathjax: true
---

The mathjax and katex options are used to set the rendering engine.

渲染引擎

MathJax or KaTeX

两种 Math 引擎可使用：

  1. MathJax is a JavaScript display engine for mathematics that works in all browsers. It is highly modular on input and output. Use MathML, TeX, and ASCIImath as input and produce HTML+CSS, SVG, or MathML as output.
  2. KaTeX is a faster math rendering engine compared to MathJax 3. And it could survive without JavaScript. But, for now KaTeX supports less features than MathJax. Here is a list of TeX functions supported by KaTeX.

Firstly, you need to choose a rendering engine and turn on enable for it in NexT config file. Then you need to install the corresponding Hexo Renderer to fully support the display of Math Equations - Only turn on enable may not let you see the displayed equations correctly. 【先启用选定的渲染引擎，再确认安装所需的渲染器。】

本博客选用更流行的 MathJax 作为数学公式渲染引擎，并安装Next推荐的“可完美处理数学公式” Markdown 渲染器 hexo-renderer-pandoc。

操作步骤

  1. _config.next.yml中设置mathjax为true

    1
    2
    3
    4
    math:
      ...
      mathjax:
        enable: true

  2. 通过npm卸载原来使用的hexo-renderer-marked，安装hexo-renderer-pandoc

    1
    2
    $ npm un hexo-renderer-marked
    $ npm i hexo-renderer-pandoc

    MathJax 所需的各种扩展（extension）将自动加载。

    All extensions of MathJax are loaded automatically. For example, mhchem is a tool for writing beautiful chemical equations easily. It implements the \ce and \pu chemical equation macros of the LaTeX mhchem package. More information: MathJax/mhchem Manual.

  3. 删除原来试装的hexo-math（node_modules目录下可见），以免与Next内置的渲染引擎冲突。

    1
    $ npm un hexo-math

测试

上述修改（数学引擎、Markdown引擎）后

please execute hexo clean. Run standard Hexo generate, deploy process or start the server to test whether the plugin is working properly:

1
2
$ hexo clean && hexo g -d
# or hexo clean && hexo s

如下爱因斯坦质能方程公式正常渲染显示：

1
2
3
$$\begin{equation} 
e=mc^2
\end{equation}$$

\[\begin{equation} e=mc^2 \end{equation}\]

MathJax用法与示例

公式编号

NexT v6.3.0 之后，增加了对公式自动编号的功能。需要设置 mathjax.tags to ams

1
2
3
4
5
math:
  mathjax:
    enable: true
    # Available values: none | ams | all
    tags: ams

And to make the automatic equation numbering work, you have to wrap your LaTeX equations in equation environment. Using the plain old style (i.e., wrap an equation with two dollar signs in each side) will not work. 自动编号要求 LaTeX 公式使用equation环境，而传统将公式用两个美元符号包围起来的方式则不支持。

1
2
3
4
5
6
7
$$
y=\sqrt{mx}
$$

$$\begin{equation}
e=mc^2
\end{equation}$$

\[ y=\sqrt{mx} \]

\[\begin{equation} e=mc^2 \end{equation}\]

忽略了对公式y=\sqrt{mx}的编号。

公式引用

How to refer to an equation? Just give a \label{} tag and then in your later text, use \ref{} or \eqref{} to refer it. Using \eqref{} is preferred since if you use \ref{}, there are no parentheses around the equation number.

  1. 为公式添加 \label{} 标签；
  2. 文本中使用\ref{} 或 \eqref{} 引用；
  3. \eqref{} 为引用的公式编号添加括号，推荐使用。
1
2
3
4
5
$$\begin{equation} \label{eq1}
e=mc^2
\end{equation}$$

The famous matter-energy equation $\eqref{eq1}$ proposed by Einstein...

\[\begin{equation} \label{eq1} e=mc^2 \end{equation}\]

The famous matter-energy equation \(\eqref{eq1}\) proposed by Einstein...

公式引用的标签可在定义之后，也可在定义之前，处理上应是全文检索。

多行公式：aligned

For multi-line equations, inside the equation environment, you can use the aligned environment to split it into multiple lines: 【在equation内使用aligned】

1
2
3
4
5
6
7
8
9
$$\begin{equation} \label{eq_ml}
\begin{aligned}
a &= b + c \\
  &= d + e + f + g \\
  &= h + i
\end{aligned}
\end{equation}$$

Equation $\eqref{eq_ml}$ is a multi-line equation.

\[\begin{equation} \label{eq_ml} \begin{aligned} a &= b + c \\ &= d + e + f + g \\ &= h + i \end{aligned} \end{equation}\]

Equation \(\eqref{eq_ml}\) is a multi-line equation.

对齐多个公式：align

We can use align environment to align multiple equations. Each of these equations will get its own numbers.【独立使用align对齐处理多个公式】

1
2
3
4
5
6
7
$$\begin{align}
a &= b + c \label{eq_align1} \\
x &= yz \label{eq_align2} \\
l &= m - n \label{eq_align3}
\end{align}$$

There are three aligned equations: equation $\eqref{eq_align1}$, equation $\eqref{eq_align2}$ and equation $\eqref{eq_align3}$.

\[\begin{align} a &= b + c \label{eq_align1} \\ x &= yz \label{eq_align2} \\ l &= m - n \label{eq_align3} \end{align}\]

There are three aligned equations: equation \(\eqref{eq_align1}\), equation \(\eqref{eq_align2}\) and equation \(\eqref{eq_align3}\).

Since align in and of itself is a complete equation environment, we do not need to wrap it with equation environment.

忽略对某些公式的编号：\nonumber

In the align environment, if you do not want to number one or some equations, just use \nonumber right behind these equations. Like the following:

1
2
3
4
5
$$\begin{align}
-4 + 5x &= 2 + y \nonumber \\
w + 2 &= -1 + w \\
ab &= cb
\end{align}$$

\[\begin{align} -4 + 5x &= 2 + y \nonumber \\ w + 2 &= -1 + w \\ ab &= cb \end{align}\]

给公式赋显示标记：\tag{x}

Sometimes, you want to use more «exotic» style to refer your equation. You can use \tag{} to achieve this. For example:

1
2
3
$$x+1\over\sqrt{1-x^2} \tag{i}\label{eq_tag}$$

Equation $\eqref{eq_tag}$ use `\tag{}` instead of automatic numbering.

\[x+1\over\sqrt{1-x^2} \tag{i}\label{eq_tag}\]

Equation \(\eqref{eq_tag}\) use \tag{} instead of automatic numbering.