hexo博客fluid主题下处理数学公式

fluid主题自带了mathjax渲染器,该渲染器需要适当的配置

修改主题配置

修改_config.fluid.yml:

1
2
3
4
5
6
7
8
9
math:
# 开启后文章默认可用,自定义页面如需使用,需在 Front-matter 中指定 `math: true`
enable: true

# 开启后,只有在文章 Front-matter 里指定 `math: true` 才会在文章页启动公式转换,以便在页面不包含公式时提高加载速度
specific: false

# Options: mathjax | katex
engine: mathjax

启用math并设置引擎为mathjax

hexo 交叉引用

mathjax的数学公式支持自动编号并交叉引用,但是hexo的fluid主题默认没有开交叉引用,需要修改源代码。参考mathjax官方文档:https://docs.mathjax.org/en/latest/input/tex/eqnumbers.html

需要给mathjax添加配置:

1
2
3
4
5
window.MathJax = {
tex: {
tags: 'ams'
}
};

找到node_modules\hexo-theme-fluid\layout\_partials\plugins\math.ejs,将上面的配置选项添加到mathjax的配置中即可。

书写数学公式的方法

markdown有几种数学公式书写方法,但是hexo和博客园的公式不完全兼容,有一些踩坑点,接下来会逐一介绍。

1. 行内公式

直接用$...$包裹即可

2. 行间公式

写法一: 直接用$$包围公式

1
2
3
$$
\boldsymbol{R}=x
$$

渲染结果如下: \[ \boldsymbol{R}=x \]

写法二: 直接写latex公式环境

1
2
3
\begin{equation}
\boldsymbol{R}=x
\end{equation}

渲染结果如下:

\[\begin{equation} \boldsymbol{R}=x \end{equation}\]

这两种写法在博客园和hexo都没问题,写法二可以加标签,进行交叉引用。

注意:写法二是不符合MathJax标准的,但是MathJax可以处理,关于这点将在后面做出讨论。

写法三: latex公式环境包围在$$

1
2
3
4
5
$$
\begin{equation}
\boldsymbol{R}=x
\end{equation}
$$

即使是写法二可以渲染,但是也建议将latex的公式包围在$$环境中。原因将稍后解释。

交叉引用的写法

使用\label进行交叉引用

举个例子

1
2
3
4
5
6
\begin{equation}
\boldsymbol{R}=x
\label{eq1}
\end{equation}

我们在公式\eqref{eq1}中提到了balabala

渲染结果如下:

\[\begin{equation} \boldsymbol{R}=x \label{eq1} \end{equation}\]

我们在公式\(\eqref{eq1}\)中提到了balabala

这部分虽然在博客园编辑器中无法预览,但是保存后在网页是可以正确渲染的。

数学公式渲染的bug/踩坑点

1. $$中间不可以有空行

必须保证公式没有空行的原因是pandoc渲染器的规定,查看pandoc的文档:https://pandoc.org/MANUAL.html#extension-tex_math_dollars,有这么一句话:

For display math, use $$ delimiters. (In this case, the delimiters may be separated from the formula by whitespace. However, there can be no blank lines between the opening and closing $$ delimiters.)
为了显示数学公式,请使用 $$ 作为分隔符。(在这种情况下,分隔符与公式之间可以用空格隔开。但是,在开头的 $$ 分隔符和结尾的 $$ 分隔符之间不能有空行。)

不论写什么公式,只要公式被包围在$$中,那么就不可以有空白行,否则会渲染错误,这是pandoc对$$的限制。

Q: 在latex公式体前后用不用写$$

A: 可以不写,但是建议写。原因是,不写的时候能成功渲染全得益于pandoc的raw_tex扩展以及MathJax的包容。

本人之前写公式就这么写:

1
2
3
4
5
$$
\begin{equation}
...
\end{equation}
$$

这种写法在博客园和hexo都可以完美支持,也是最标准的写法。同时MathJax也建议这么写,根据MathJax文档描述:

Note that, as opposed to true LaTeX, MathJax processes all environments when wrapped inside math delimiters, even those like \begin{equation}...\end{equation} that are supposed to be used to initiate math mode. By default, MathJax will also render all environments outside of delimiters, e.g., \begin{matrix}...\end{matrix} would be processed even if it is not in math mode delimiters, though you are encouraged to use proper delimiters for these cases to make your files more compatible with actual LaTeX. This functionality can be controlled via the processEnvironments option in the tex configuration options.
注意,不同于LaTex,MathJax处理的所有数学公式都应该显式地包裹在数学分隔符中(如$...$,即使是\begin{equation}...\end{equation}也应该在数学环境中。但是,MathJax默认会处理所有数学环境,即使\begin{equation}...\end{equation}不在$...$中。但是文档建议始终使用正确的分隔符。

Q: 为什么在latex环境中不写$$也可以渲染?

A:这是pandoc的raw_tex扩展的功劳。

继续看pandoc文档,pandoc处理markdown自动会加入一个raw_tex扩展https://pandoc.org/MANUAL.html#extension-raw_tex
官方文档有这么一句介绍

... pandoc allows raw LaTeX, TeX, and ConTeXt to be included in a document.
... pandoc还允许在文档中包含原始LaTeX、TeX和ConTeXt内容。

启用该扩展意味着,当pandoc遇到\begin{equation}等latex代码时,会自动把它保留原样,交给数学引擎(mathjax)处理,而mathjax恰好允许latex不在$$中。所以上述方法二才可行,同时,由于这个特殊的机制,绕开了$$的限制,方法二的公式中是可以有空行的。

我们查看hexo-render-pandoc的源代码即可发现,它采用了pandoc默认的markdown格式来解析,而该格式默认启用了raw_tex扩展。得益于这个扩展,博客中才可以直接写latex公式。

如果我们禁用raw_tex扩展,方法二就不可用了。禁用方法如下:

1
2
3
# _config.yml
pandoc:
extensions: ["-raw_tex"]

4. 加粗命令

latex中加粗公式有\bold, \boldsymbol, \bm,这几种在博客园中都支持,但是hexo中仅支持\boldsymbol

hexo支持两种加粗,\mathbf和\boldsymbol,mathbf不支持希腊字母加粗,而且加粗后是正体,boldsymbol加粗后是斜体字母,见下:

\mathbf:\(a\rightarrow\mathbf{a}\)\(\alpha\rightarrow\mathbf{\alpha}\)
\boldsymbol: \(a\rightarrow\boldsymbol{a}\)\(\alpha\rightarrow\boldsymbol{\alpha}\)


hexo博客fluid主题下处理数学公式
https://horizon86.github.io/2025/03/25/hexo博客fluid主题下处理数学公式/
作者
horizon86
发布于
2025年3月25日
许可协议