Hexo+Fulid主题中的Latex渲染问题

前言

最近写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

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

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}
        ],
          // • rendering keys, e.g.:
        throwOnError : false
        });
    });
</script>

`, 'default');

注意，在使用矩阵时，外部可用<sapn></sapn> 或<div></div>包裹，以解决\\的转义问题。

<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}$

</span>

其实这里也可以用\newline来换行，这样就不存在\\的转义问题了：

$\begin{bmatrix} 2 & 0 & 0 & \cdots & m_1\newline 0 & 2 & 0 & \cdots & m_2\newline 0 & 0 & 2 & \cdots & m_3\newline \vdots & \vdots & \vdots & \ddots & \vdots\newline 1 & 1 & 1 & \cdots & 1\newline \end{bmatrix}$

但是同时创建多个矩阵时可能会出问题，最稳妥的方法还是打上 <span></span>标签。