How to use mathjax in hexo
参考自：https://www.cnblogs.com/wangxin37/p/8185688.html
在主题中手动添加js安装mathjax。
类似所有第三方js插件，js加载方式有两种：
- 第一种，通过连接CDN加载js代码。好处是省了本地配置js代码，并且每次加载都是最新的，缺点是一旦连接的CDN出问题，可能卡住页面的js加载。
- 第二种，将js代码下载下来，放到主题的js文件夹中，通过本地相对目录加载。优缺点和第一种方法正相反。
在themes/snippet/layout/_partial 目录中新建mathjax.ejs，填入如下js代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!-- MathJax配置，可通过单美元符号书写行内公式等 --> <script type="text/x-mathjax-config"> MathJax.Hub.Config({ "HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"], linebreaks: { automatic:true }, EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50) }, tex2jax: { inlineMath: [ ["$", "$"], ["\\(","\\)"] ], processEscapes: true, ignoreClass: "tex2jax_ignore|dno", skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'] }, TeX: { equationNumbers: { autoNumber: "AMS" }, noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } }, Macros: { href: "{}" } }, messageStyle: "none" }); </script> <!-- 给MathJax元素添加has-jax class --> <script type="text/x-mathjax-config"> MathJax.Hub.Queue(function() { var all = MathJax.Hub.getAllJax(), i; for(i=0; i < all.length; i += 1) { all[i].SourceElement().parentNode.className += ' has-jax'; } }); </script> <!-- 通过连接CDN加载MathJax的js代码 --> <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"> </script> |
只在有公式的页面才加载MathJax
有公式才加载MathJax，这点比较重要，没有公式仍然加载js渲染公式，会影响页面加载速度。在所有有公式的文章的front-matter中增加一项配置 mathjax: true，位置是scaffolds目录下的三个md文件。例如
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
--- title: Leetcode题目解析（191112）：200&206 categories: - C/C++ tags: - Leetcode - 算法 comments: false mathjax: true date: 2019-11-12 10:39:05 --- |
然后在themes/snippet/layout/_partial/footer.ejs 中通过此配置变量决定是否加载mathjax.ejs ：
|
1 2 3 4 5 |
<!-- 根据页面mathjax变量决定是否加载MathJax数学公式js --> <% if (page.mathjax){ %> <%- partial('mathjax') %> <% } %> |
解决MarkDown与MathJax渲染冲突
Hexo默认的MarkDown渲染引擎hexo-renderer-marked会调用marked模块的marked.js脚本进行最终的解释，这个脚本在Hexo安装后的node_modules\marked\lib\目录中。
有两点修改：
针对下划线的问题，取消作为斜体转义，因为marked.js中*也是斜体的意思，所以取消掉的转义并不影响使用markdown，我平时一般不用斜体，就是用也更习惯用*作为斜体标记。
针对marked.js与Mathjax对于个别字符二次转义的问题，我们只要不让marked.js去转义\,{,}在MathJax中有特殊用途的字符就行了。
编辑node_modules\marked\lib\marked.js 脚本：
【第一步】
将451行的
|
1 2 |
escape: /^\\([\`*{}\[\]()# +\-.!_>])/, |
替换为
|
1 2 |
escape: /^\\([`*\[\]()# +\-.!_>])/, |
这一步取消了对\,{,}的转义(escape)
【第二步】
将459行的
|
1 2 |
em: /^\b_((?:[^_]|__)+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/, |
替换为
|
1 2 |
em:/^\*((?:\*\*|[\s\S])+?)\*(?!\*)/, |
这一步取消了对斜体标记_的转义。
这样带来一个问题就是，以后每次更换电脑，在新电脑上安装完Hexo环境后，都要手动修改marked.js文件。
MathJax公式书写
MathJax公式书写参考
http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference
其它详见参考原文
