不更换插件解决Hexo博客Latex公式的渲染问题

问题描述

在Hexo博客中，使用默认的MathJax或者Katex渲染数学公式时，会出现渲染错误，导致公式无法正常显示。

解决方法

这里不考虑更换hexo渲染器的解决方案，容易导致各种样式问题和兼容性问题，主要采纳一些简单的语法技巧来解决。

1. 必要的情况下使用\进行转义

alt text alt text

上图的公式在hexo无法正常显示，但在_前面加上\后可以正常显示:
alt text
原因不明,来源参考EasyHexo:
alt text

2. 使用<span>包裹公式,注意标签独占一行

很多公式直接写渲染异常，但用或者

标签将LaTeX公式包裹起来，这样公式内容就不会被markdown渲染器识别为转义字符，就会显示正常，典型的比如换行字符\\.
不使用<span>标签的公式渲染效果如下:

1
2
3
4
5
6
7
8
9
$$
\begin{aligned}
V(s)& =\mathbb{E}[G_t|S_t=s] \\
&=\mathbb{E}[R_t+\gamma R_{t+1}+\gamma^2R_{t+2}+\ldots|S_t=s] \\
&=\mathbb{E}[R_t+\gamma(R_{t+1}+\gamma R_{t+2}+\ldots)|S_t=s] \\
&=\mathbb{E}[R_t+\gamma G_{t+1}|S_t=s] \\
&=\mathbb{E}[R_t+\gamma V(S_{t+1})|S_t=s]
\end{aligned}
$$

使用<span>标签的公式渲染效果如下:

1
2
3
4
5
6
7
8
9
10
11
<span>
$$
\begin{aligned}
V(s)& =\mathbb{E}[G_t|S_t=s] \\
&=\mathbb{E}[R_t+\gamma R_{t+1}+\gamma^2R_{t+2}+\ldots|S_t=s] \\
&=\mathbb{E}[R_t+\gamma(R_{t+1}+\gamma R_{t+2}+\ldots)|S_t=s] \\
&=\mathbb{E}[R_t+\gamma G_{t+1}|S_t=s] \\
&=\mathbb{E}[R_t+\gamma V(S_{t+1})|S_t=s]
\end{aligned}
$$
</span>

3. 引入js代码

MathJax:

1
2
3
4
5
6
7
8
9
10
<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  }
};
</script>
<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>

Katex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css" integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js" integrity="sha384-cpW21h6RZv/phavutF+AuVYrr+dA8xD9zs6FwLpaCct6O9ctzYFfFr4dgmgccOTx" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
          // customised options
          // • auto-render specific keys, e.g.:
          delimiters: [
              {left: '$$', right: '$$', display: true},
              {left: '$', right: '$', display: false},
              {left: '\\(', right: '\\)', display: false},
              {left: '\\[', right: '\\]', display: true}
          ],
          // • rendering keys, e.g.:
          throwOnError : false
        });
    });
</script>

其中，2和3的方法来源于KEVIN’S BLOG