/

在hexo上使用mathjax展示公式(非NexT主题)

为了在博客上敲公式真是踩了好多坑…心累_(:з」∠)_
好在终于完美解决啦
在vscode上敲公式看预览还美滋滋,上传上来人都傻了hhh,感觉找解决方法。看起来NexT主题已经有很完善的解决方案了,不过我用的hexo-casper主题(非常美貌!吹爆!!),作者为了主题的轻便没有加入mathjax支持,就只能自己动手,丰衣足食啦。

hexo-math, hexo-renderer-mathjax, hexo-renderer-kramed这些我都试过,也根据网上教程改了各种配置。其中只装hexo-math时,独立一行的公式…$$就不能渲染,这太不符合我平时的使用习惯了…

这里可以参考hexo-math的issues 26,有非常丰富的讨论,也有很多热心的小伙伴给出了可行的解决方案,可惜我不是幸运儿那些方案对我都没用TAT

废话了这么多,还是上最后的解决方法:

1
2
3
4
5
6
 <script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script type="text/javascript" async src="path-to-mathjax/MathJax.js?config=TeX-AMS_CHTML"></script>

这里最后一行path-to-mathjax是指js文件的路径,我用的是cdn地址https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML,直接替换上面的src中的内容即可

1
2
3
4
5
6
 <script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

将这一部分追加到theme里配置js的文件中,以hexo-theme-casper为例,是themes/hexo-casper/layout/_layout.swig

然后 hexo clean, hexo g, hexo s或者d,就可以看到效果啦~

参考资料:在Hexo使用Latex写公式