前言

本来 mathjax 的渲染一直用的十分顺手，直到有一天，我打了一个超级复杂的公式，发现渲染出来的效果不太好，于是我开始了寻找解决方案。

比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
\begin{bmatrix}
	1 & x_0 & x_0^2 & \cdots & x_0^n \\
	1 & x_1 & x_1^2 & \cdots & x_1^n \\
	\vdots & \vdots & \vdots & \ddots & \vdots \\
    1 & x_n & x_n^2 & \cdots & x_n^n  
\end{bmatrix}
\begin{bmatrix}
	a_0 \\ a_1 \\ \vdots \\ a_n
\end{bmatrix}
=
\begin{bmatrix}
	y_0 \\ y_1 \\ \vdots \\ y_n
\end{bmatrix}

分析问题

hexo 常用的渲染插件为 hexo-renderer-marked，原理是将公式块渲染为一个元素，然后用 MathJax 进行渲染。

但插件会优先转义 Markdown 语法，当语法冲突时，会导致公式无法正常渲染。

解决方案

换渲染插件，使用 hexo-renderer-pandoc。

如果你有下载过任何其他的渲染插件，请务必卸载，否则可能会导致渲染问题。

需要本机下载 Pandoc 并配置环境变量。

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

还要在 hexo 配置文件 _config.yml 中添加以下内容：

1
2
3
4
5
6
7
8
9
pandoc:
  args:
    - '-f'
    - 'commonmark_x'
    - '-t'
    - 'html'
    - '--mathjax'
  extensions:
    - '-implicit_figures'

Github Action 自动部署

1
2
3
4
- name: 安装 Pandoc
  run: |
    wget https://github.com/jgm/pandoc/releases/download/2.10.1/pandoc-2.10.1-1-amd64.deb
    sudo dpkg -i pandoc-2.10.1-1-amd64.deb

Mathjax 版本

可以自己改 CDN，具体在 主题配置文件 配置项 CDN 处。（一般在文件末尾）

找到 option 中的 mathjax 项，去掉注释，后面加上 CDN 链接。

文件名输入格式支持输出格式含可访问性扩展 (assistive / complexity / explorer)是否含 Speech Rule Engine文件大小 (约)推荐用途说明
tex-chtml.jsTeXCHTML❌ 无❌ 无~300KB一般网页、轻量渲染最轻版本，只支持 TeX→CHTML
tex-svg.jsTeXSVG❌ 无❌ 无~350KB需要高质量矢量公式输出为 SVG，适合打印或 PDF
tex-mml-chtml.jsTeX + MathMLCHTML✅ 有✅ 有~450KB✅ 最完整常用版本官方推荐版，支持屏幕阅读器
tex-mml-svg.jsTeX + MathMLSVG✅ 有✅ 有~500KB可访问 + 高质量公式含语音朗读与 Explorer
mml-chtml.jsMathMLCHTML⚠️ 部分❌ 无~250KB原生 MathML 网站无 TeX 支持
mml-svg.jsMathMLSVG⚠️ 部分❌ 无~280KBMathML + SVG 输出纯 MathML 渲染
tex-mml-chtml-full.jsTeX + MathML + AsciiMathCHTML✅ 有✅ 有~900KB–1MB🧩 全功能版（全家桶）包含所有输入 / 输出 / 辅助模块
tex-mml-svg-full.jsTeX + MathML + AsciiMathSVG✅ 有✅ 有~1.1MB大型项目、演示系统所有模块 + SVG 输出