前言
最近写ctf密码学博客时遇见了许多问题，Latex渲染错位/不渲染，导致博客无法正常观看，于是我在网上找了许多教程，也找了大佬咨询，但人与人的悲欢并不相同，最后找了一种比较原始的方法，才解决了我的问题，如果有人跟我有相同的困扰，可以参考参考。
遇见的问题
首先记录一下我遇见的问题，开始默认的latex渲染器不能完全渲染，后来照着网上教程使用了hexo-renderer-markdown-it-plus+katex 然鹅并没有解决我的问题。
后来在大佬的指点下使用了更为稳定的hexo-renderer-kramed+mathjax，但是不知道是CDN的问题问题还是怎样，在本地部署时能好好的，但是在部署到远端服务器之后，网页还是渲染失败，查看了一下控制台， 发现CDN默认访问http，由于https和http不能混用，一般浏览器默认会拒绝访问，若你在浏览器左上角小锁的此网站权限中将不安全内容设为开启，便能渲染成功。（我暂时没找到这个方案的解决办法，有解决办法的师傅可以评论区告诉我。。。）
引入脚本解决Latex渲染问题
最后，我使用了引入javascript脚本的方法解决了这个问题，下面介绍具体实现方法。
- 首先，检查markdown渲染环境，最好使用默认的
hexo-renderer-marked ,如果有其他的，最好先卸载掉，否则会出现渲染冲突的问题
1
2
3
4
| npm uninstall hexo-renderer-kramed
npm uninstall hexo-renderer-pandoc
npm install hexo-renderer-marked
|
如果你是默认设置的话，就没必要做这一步了。
- 引入脚本，这里分两种方式
- 一、在博客文章的md文件中引入
javascript脚本，推荐写好模板，在需要数学公式的博客文章直接引入模板。
- 二、
hexo 5.0以上的可以使用注入器，可在/themes/fluid/scripts中添加js文件，下面两个任选其一。
mathjax.js
1
2
3
4
5
6
7
8
9
10
11
12
| hexo.extend.injector.register('body_end', `
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
}
};
</script>
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>
`, 'default');
|
katex.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| hexo.extend.injector.register('body_end', `
<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}
],
throwOnError : false
});
});
</script>
`, 'default');
|
- 注意，在使用矩阵时，外部可用
<sapn></sapn> 或<div></div>包裹，以解决\\的转义问题。
1
2
3
4
5
6
7
8
9
10
11
| <span>
$$
\begin{bmatrix}
2 & 0 & 0 & \cdots & m_1\\
0 & 2 & 0 & \cdots & m_2\\
0 & 0 & 2 & \cdots & m_3\\
\vdots & \vdots & \vdots & \ddots & \vdots\\
1 & 1 & 1 & \cdots & 1\\
\end{bmatrix}
$$
</span>
|
未加<span></span>:
$$
\begin{bmatrix}
2 & 0 & 0 & \cdots & m_1\
0 & 2 & 0 & \cdots & m_2\
0 & 0 & 2 & \cdots & m_3\
\vdots & \vdots & \vdots & \ddots & \vdots\
1 & 1 & 1 & \cdots & 1\
\end{bmatrix}
$$
加了<span></span>:
$$
\begin{bmatrix}
2 & 0 & 0 & \cdots & m_1\\
0 & 2 & 0 & \cdots & m_2\\
0 & 0 & 2 & \cdots & m_3\\
\vdots & \vdots & \vdots & \ddots & \vdots\\
1 & 1 & 1 & \cdots & 1\\
\end{bmatrix}
$$
总结
这确实是个挺原始的方法，虽然写矩阵时有点小麻烦，但确实挺好用，如果你有什么更好的方法，可用告诉我，有什么问题也欢迎提出。
参考
Hexo支持LaTeX数学公式渲染 - KEVIN’S BLOG (kevinchu.top)