让Hexo Next (v8.0.0) 支持LaTeX数学公式

  • Title(EN): Making Hexo Next v8.0.0 Theme LaTeX Math Equation Supported
  • Author: dog2

  • 环境
    • OS:Max OS 10.15
    • node: 13.7.0
    • hexo:4.2.1
    • hexo-cli: 3.1.0
    • hexo-theme-next: v8.0.0-rc.2
  • 需求:让hexo的next主题支持渲染LaTeX语法的数学公式。
  • 参考链接:
    • 官方文档

步骤

根据官方文档,让Next主题支持公式有有两种方式(无法正常渲染请刷新页面):

graph LR
H[Hexo] ==> |主题| T(NexT)
T ==> |公式渲染引擎1| MJ{MathJax}
T -.-> |公式渲染引擎2| KT{KaTeX}
style KT text-decoration:line-through

MJ ==> |markdown渲染引擎1| PD(hexo-renderer-pandoc)
MJ -.-> |markdown渲染引擎2| KR(hexo-renderer-kramed)
MJ -.-> |化学公式插件| MC((mhchem))

KT -.-> |markdown渲染引擎1| MDIP(hexo-renderer-markdown-it-plus)
KT -.-> |markdown渲染引擎2| MDI(hexo-renderer-markdown-it)
KT -.-> |公式复制插件| CPTEX((Copy-tex))
KT -.-> |bug| KTBUG>解析$有Bug需手动修复]

我的测试中只有上图中的实体粗线的方式成功,这里就记录一下这种方式的步骤,即

  • NexT => MathJax => hexo-renderer-pandoc
  1. 安装pandoc

    1
    brew install pandoc

  2. 将默认的markdown渲染引擎hexo-renderer-marked替换为hexo-renderer-pandoc

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

  3. 修改next主题配置

    Next的配置文件,有2种形式,请参考官方文档

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    # Math Formulas Render Support
    math:
    # 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

    # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
    mathjax:
    enable: true
    # 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: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false


    vendors:
    # MathJax
    mathjax: //cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js

    per_page按需设置,具体可参考注释和官网说明。其他选项需要跟上述设置保持一致。

测试数学公式

代码来自NexT官网,Mathjax渲染的公式已经内置了丰富的右键菜单,可以复制公式代码。

简单公式

带label的公式

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

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

根据label引用上述公式

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

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

多行公式

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

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

引用上述多行公式

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

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

多行多编号公式

1
2
3
4
5
$$\begin{align}
a &= b + c \label{eq3} \\
x &= yz \label{eq4}\\
l &= m - n \label{eq5}
\end{align}$$

\[\begin{align} a &= b + c \label{eq3} \\ x &= yz \label{eq4}\\ l &= m - n \label{eq5} \end{align}\]

引用上述多行公式

1
There are three aligned equations: equation $\eqref{eq3}$, equation $\eqref{eq4}$ and equation $\eqref{eq5}$.

There are three aligned equations: equation \(\eqref{eq3}\), equation \(\eqref{eq4}\) and equation \(\eqref{eq5}\).

无编号公式

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指定编号文字

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

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

引用上述公式

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

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