Hexo公式问题 - 多行公式显示 Hexo 公式显示问题苦天下久矣。
写这篇文章的初衷是因为最近在用多行公式时（主要是换行与对齐）出现了问题，\begin{align} \end{align} 竟然渲染不了。我用的是广被推崇的 hexo-renderer-markdown-it-plus，没想到也会在这个地方出现问题。\begin{array}{rcl} \end{array} 凑活一下。表格形式与纯粹的公式毕竟不同，是以行内公式的形式渲染的【从积分符号 ∫ \int ∫
∫ csc u d u = ∫ sin u sin 2 u d u = − ∫ d ( cos u ) 1 − cos 2 u = − 1 2 ∫ ( 1 1 − cos u + 1 1 + cos u ) d ( cos u ) = − 1 2 [ − ln ( 1 − cos u ) + ln ( 1 + cos u ) + C ] = ln ∣ 1 − cos u 1 + cos u ∣ + C = ln ∣ 2 sin u 2 2 cos u 2 ∣ + C = ln ∣ tan u 2 ∣ + C \begin{array}{rcl}
\int \csc udu &=& \int\cfrac{\sin u}{\sin^2 u}du=-\int\cfrac{d(\cos u)}{1-\cos^2 u} \\
&=& -\frac{1}{2}\int(\cfrac{1}{1-\cos u}+\cfrac{1}{1+\cos u})d(\cos u)\\
&=& -\frac{1}{2}[-\ln(1-\cos u)+\ln(1+\cos u)+C]\\
&=& \ln\left|\sqrt{\frac{1-\cos u}{1+\cos u}}\right|+C=\ln\left|\sqrt{\frac{2\sin^ \frac{u}{2}}{2\cos^ \frac{u}{2}}}\right|+C\\
&=& \ln\left|\tan\frac{u}{2}\right|+C
\end{array} ∫ csc u d u = = = = = ∫ sin 2 u sin u d u = − ∫ 1 − cos 2 u d ( cos u ) − 2 1 ∫ ( 1 − cos u 1 + 1 + cos u 1 ) d ( cos u ) − 2 1 [ − ln ( 1 − cos u ) + ln ( 1 + cos u ) + C ] ln ∣ ∣ ∣ ∣ 1 + c o s u 1 − c o s u ∣ ∣ ∣ ∣ + C = ln ∣ ∣ ∣ ∣ ∣ 2 c o s 2 u 2 s i n 2 u ∣ ∣ ∣ ∣ ∣ + C ln ∣ ∣ ∣ tan 2 u ∣ ∣ ∣ + C
∫ csc u d u = ∫ sin u sin 2 u d u = − ∫ d ( cos u ) 1 − cos 2 u = − 1 2 ∫ ( 1 1 − cos u + 1 1 + cos u ) d ( cos u ) = − 1 2 [ − ln ( 1 − cos u ) + ln ( 1 + cos u ) + C ] = ln ∣ 1 − cos u 1 + cos u ∣ + C = ln ∣ 2 sin u 2 2 cos u 2 ∣ + C = ln ∣ tan u 2 ∣ + C \begin{array}{rcl}
\int \csc udu &=& \int\cfrac{\sin u}{\sin^2 u}du=-\int\cfrac{d(\cos u)}{1-\cos^2 u} \\
&=& -\frac{1}{2}\int(\cfrac{1}{1-\cos u}+\cfrac{1}{1+\cos u})d(\cos u)\\
\\
&=& -\frac{1}{2}[-\ln(1-\cos u)+\ln(1+\cos u)+C]\\
\\
&=& \ln\left|\sqrt{\frac{1-\cos u}{1+\cos u}}\right|+C=\ln\left|\sqrt{\frac{2\sin^ \frac{u}{2}}{2\cos^ \frac{u}{2}}}\right|+C\\
\\
&=& \ln\left|\tan\frac{u}{2}\right|+C
\end{array} ∫ csc u d u = = = = = ∫ sin 2 u sin u d u = − ∫ 1 − cos 2 u d ( cos u ) − 2 1 ∫ ( 1 − cos u 1 + 1 + cos u 1 ) d ( cos u ) − 2 1 [ − ln ( 1 − cos u ) + ln ( 1 + cos u ) + C ] ln ∣ ∣ ∣ ∣ 1 + c o s u 1 − c o s u ∣ ∣ ∣ ∣ + C = ln ∣ ∣ ∣ ∣ ∣ 2 c o s 2 u 2 s i n 2 u ∣ ∣ ∣ ∣ ∣ + C ln ∣ ∣ ∣ tan 2 u ∣ ∣ ∣ + C
这属于治标不治本的方法，所以在有时间的时候还是寻求根本的解决方法。
于是开始了满满的搜索之路，结果找到了三个方案，实际上是三个插件或者说是渲染器：
hexo-renderer-pandoc
官网：https://pandoc.org/ https://www.npmjs.com/package/hexo-renderer-pandoc https://github.com/wzpan/hexo-renderer-pandoc
这个插件用过的人都说好，是一个不错的解决方案，使用时需要先卸载原生渲染器，再下载该插件：
1 2 npm uninstall hexo-renderer-marked --save npm install hexo-renderer-pandoc --save
如果这时重新生成博客的话，一定会报错，原因是没有找到 pandocpandoc 软件本地支持。在本地没问题，安装一个最新版本的就可以，获取本地软件-windows版 。如果要使用 Githua Actions 自动发布博客，那还需要为pandoc进行额外配置：官方文档 ，该配置如下：
1 2 3 4 5 6 7 8 9 10 11 name: Simple Usage on: push jobs: convert_via_pandoc: runs-on: ubuntu-18.04 steps: - uses: docker://pandoc/core:2.9 with: args: "--help"
这个 Github Actions 我没有试验，不过本地渲染效果确实还可以。
pandoc 的优点显而易见，渲染效果好。缺点也很明显，部署麻烦，而且据搜索到的结果显示耗费资源多，加载缓慢。如果我目前使用的渲染器不行了之后，或许会回过头来研究 pandoc。
markdown-it-latex2img
npmjs：https://www.npmjs.com/package/markdown-it-latex2img https://github.com/MakerGYT/markdown-it-latex2img#hexo
严格意义上讲，它不是一个渲染器，而是一个渲染器的拓展：hexo-renderer-markdown-it，安装：
1 2 npm i hexo-renderer-markdown-it --save npm i markdown-it-latex2img --save
它是在服务器上工作的，可以成功渲染多行公式 \begin{align} \end{align}，但对于一些显然的内容却不能成功渲染: \Alpha_config.yml 中的配置：
1 2 3 4 5 markdown: plugins: - name: markdown-it-latex2img options: style: 'filter: opacity(90%);transform:scale(0.85);vertical-align:middle;text-align:center;'
hexo-renderer-markdown-it-plus
github：https://github.com/KaTeX/KaTeX https://katex.org/docs/browser.html
这是我目前正在使用的公式渲染器，十分优雅。但是会出现开篇所说的多行公式显示的问题。实际上，该问题的原因不在该渲染器，因为渲染效果是依靠引入的 katex。所以我把目光放在 katex 上。通过搜索，我发现 Issue #445 ，在当时（16年左右）以及后续相当长一段时间，equation 环境不被支持，同时不能支持的还有 aligned、aligne 等语法。而我引入的 js 和 css 是早期的版本（0.12版），当时并没有解决这一问题。现在我将其更换为目前最新的 0.16 版本，即可完美支持。示例如下：
∫ csc u d u = ∫ sin u sin 2 u d u = − ∫ d ( cos u ) 1 − cos 2 u = − 1 2 ∫ ( 1 1 − cos u + 1 1 + cos u ) d ( cos u ) = − 1 2 [ − ln ( 1 − cos u ) + ln ( 1 + cos u ) + C ] = ln ∣ 1 − cos u 1 + cos u ∣ + C = ln ∣ 2 sin u 2 2 cos u 2 ∣ + C = ln ∣ tan u 2 ∣ + C \begin{aligned}
\int \csc udu &= \int\cfrac{\sin u}{\sin^2 u}du=-\int\cfrac{d(\cos u)}{1-\cos^2 u}\\
&= -\frac{1}{2}\int(\cfrac{1}{1-\cos u}+\cfrac{1}{1+\cos u})d(\cos u)\\
&= -\frac{1}{2}[-\ln(1-\cos u)+\ln(1+\cos u)+C]\\
&= \ln\left|\sqrt{\frac{1-\cos u}{1+\cos u}}\right|+C=\ln\left|\sqrt{\frac{2\sin^ \frac{u}{2}}{2\cos^ \frac{u}{2}}}\right|+C\\
&= \ln\left|\tan\frac{u}{2}\right|+C
\end{aligned}
∫ csc u d u = ∫ sin 2 u sin u d u = − ∫ 1 − cos 2 u d ( cos u ) = − 2 1 ∫ ( 1 − cos u 1 + 1 + cos u 1 ) d ( cos u ) = − 2 1 [ − ln ( 1 − cos u ) + ln ( 1 + cos u ) + C ] = ln ∣ ∣ ∣ ∣ ∣ ∣ 1 + cos u 1 − cos u ∣ ∣ ∣ ∣ ∣ ∣ + C = ln ∣ ∣ ∣ ∣ ∣ ∣ ∣ 2 cos 2 u 2 sin 2 u ∣ ∣ ∣ ∣ ∣ ∣ ∣ + C = ln ∣ ∣ ∣ ∣ tan 2 u ∣ ∣ ∣ ∣ + C
\begin{align}
f(x)&=(m+n)^2\\
&=m^2+2mn+n^2\\
\end{align}
\begin{alignat}{2}
f(x) & = (m-n)^2 \\
f(x) & = (-m+n)^2 \\
& = m^2-2mn+n^2 \\
\end{alignat}
代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 $$ \begin{aligned} \int \csc udu &= \int\cfrac{\sin u}{\sin^2 u}du=-\int\cfrac{d(\cos u)}{1-\cos^2 u}\\ &= -\frac{1}{2}\int(\cfrac{1}{1-\cos u}+\cfrac{1}{1+\cos u})d(\cos u)\\ &= -\frac{1}{2}[-\ln(1-\cos u)+\ln(1+\cos u)+C]\\ &= \ln\left|\sqrt{\frac{1-\cos u}{1+\cos u}}\right|+C=\ln\left|\sqrt{\frac{2\sin^ \frac{u}{2}}{2\cos^ \frac{u}{2}}}\right|+C\\ &= \ln\left|\tan\frac{u}{2}\right|+C \end{aligned} $$ $$ \begin{align} f(x)&=(m+n)^2\\ &=m^2+2mn+n^2\\ \end{align} $$ $$ \begin{alignat}{2} f(x) & = (m-n)^2 \\ f(x) & = (-m+n)^2 \\ & = m^2-2mn+n^2 \\ \end{alignat} $$
这里提供最新的引入内容：
1 2 3 4 5 6 7 <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous"> <!-- The loading of KaTeX is deferred to speed up page rendering --> <script defer src="https://fastly.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js" integrity="sha384-X/XCfMm41VSsqRNQgDerQczD69XqmjOOOwYQvr/uuC+j4OPoNhVgjdGFwhvN02Ja" crossorigin="anonymous"></script> <!-- To automatically render math in text elements, include the auto-render extension: --> <script defer src="https://fastly.jsdelivr.net/npm/katex@0.16.0/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"onload="renderMathInElement(document.body);"></script>
最后补充一点，hexo-renderer-markdown-it-plus 是 hexo-renderer-markdown-it 的升级版，渲染速度更快，同时也具备增加各类插件的功能。这里需要提到 markdown-it-katex 这个插件，它实际上是对 katex 的支持。但我不建议使用，原因在于它很久没有维护了，也就无法更新 katex 的最新特性，而且它也要额外引入 katex 的 .css 文件，所以为何不直接引用 katex 的 js 与 css呢？
