给Hexo博客添加Mathjax数学公式支持
前言
小白文,大神请略过……
最近群里经常有人询问Hexo博客的Mathjax的扩展使用,由于网上教程不靠谱,忽悠人一大圈还没啥卵用@(无奈)。于是花点时间折腾了下Mathjax.js,出了这篇教程。(表示没用数学公式,mathjax也是第一次接触)
唠叨一下修改代码的建议:可以在其上扩展,最好不要修改。修改会出现: 改好一个bug,出来N多个bug的这种情况,因为你不知道其他地方是否还用到你修改的这部分代码,后果很严重@(内伤)。
开始搞
百度搜索mathjax
点击第一个进入其官网
找到Getting Started,点击Learn more
拉到最下边,Jump to our docs
找到其demo代码
@(不出所料)注意其代码有个坑,js的src应改为https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-MML-AM_CHTML
接下来就是实验代码了,新建文章输入以下代码:1
2
3
4
5
6
7
8<p>
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
这里发现了个bug,即代码快里面放入raw标签会把代码直接当成html,会被解析了。所以上面的代码缺少了raw标签,还需用raw标签包起来。关于raw标签的介绍请参考hexo标签插件
正确的代码如下图@(得意):
接下来再页面上预览一下
图片:
真实效果
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
@(不出所料)ok了,很简单有木有。而且在md插入这种不常用的js可以节省一些资源。
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦
您的喜欢是作者写作最大的动力
QQ群和公众号