发表于更新于
字数总计:568阅读时长:2分钟 新加坡
问题描述
在Hexo博客中，使用默认的MathJax或者Katex渲染数学公式时，会出现渲染错误，导致公式无法正常显示。
解决方法
这里不考虑更换hexo渲染器的解决方案，容易导致各种样式问题和兼容性问题，主要采纳一些简单的语法技巧来解决。
1. 必要的情况下使用\进行转义
上图的公式在hexo无法正常显示，但在_前面加上\后可以正常显示:
原因不明,来源参考EasyHexo:
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, {
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
throwOnError : false
});
});
</script>
|
其中，2和3的方法来源于KEVIN’S BLOG
