2019-11-12 271 views 评论

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代码：

&lt;!-- MathJax配置，可通过单美元符号书写行内公式等 --&gt;
&lt;script type="text/x-mathjax-config"&gt;
    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"
    }); 
&lt;/script&gt;
&lt;!-- 给MathJax元素添加has-jax class --&gt;
&lt;script type="text/x-mathjax-config"&gt;
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for(i=0; i &lt; all.length; i += 1) {
            all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });
&lt;/script&gt;
&lt;!-- 通过连接CDN加载MathJax的js代码 --&gt;
&lt;script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"&gt;
&lt;/script&gt;

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.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>

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文件。例如

---
title: Leetcode题目解析（191112）：200&amp;206
categories:
  - C/C++
tags:
  - Leetcode
  - 算法
comments: false
mathjax: true
date: 2019-11-12 10:39:05
---

---

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 ：

&lt;!-- 根据页面mathjax变量决定是否加载MathJax数学公式js --&gt;
&lt;% if (page.mathjax){ %&gt;
&lt;%- partial('mathjax') %&gt;
&lt;% } %&gt;

<% 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行的

escape: /^\\([\`*{}\[\]()# +\-.!_&gt;])/,

1 2	escape: /^\\([\`*{}\[\]()# +\-.!_>])/,

替换为

escape: /^\\([`*\[\]()# +\-.!_&gt;])/,

1 2	escape: /^\\([`*\[\]()# +\-.!_>])/,

这一步取消了对\,{,}的转义(escape)

【第二步】
将459行的

em: /^\b_((?:[^_]|__)+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

1 2	em: /^\b_((?:[^_]\|__)+?)_\b\|^\((?:\\\|[\s\S])+?)\(?!\*)/,

替换为

em:/^\*((?:\*\*|[\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

其它详见参考原文

在主题中手动添加js安装mathjax。

只在有公式的页面才加载MathJax

解决MarkDown与MathJax渲染冲突

MathJax公式书写

给我留言取消回复