logo头像

不忘初心,奋力前行

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
<!-- 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
---
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
<!-- 根据页面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
escape: /^\\([\\`*{}\[\]()# +\-.!_>])/,

替换为

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

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

【第二步】
将459行的

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

替换为

1
em:/^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

这一步取消了对斜体标记_的转义。

这样带来一个问题就是,以后每次更换电脑,在新电脑上安装完Hexo环境后,都要手动修改marked.js文件。

MathJax公式书写

MathJax公式书写参考
http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference

行内公式

含下划线_的公式$x_mu$

1
2
3
4

希腊字符$\sigma$

```$\sigma$

行内公式$\cos 2\theta = \cos^2 \theta - \sin^2 \theta = 2 \cos^2 \theta$

1
$\cos 2\theta = \cos^2 \theta - \sin^2 \theta = 2 \cos^2 \theta$

MathJax大括号右多行赋值

$$ f(n) = \begin{cases} n/2, & \text{if $n$ is even} \ 3n+1, & \text{if $n$ is odd} \end{cases} $$

1
$$ f(n) = \begin{cases} n/2, & \text{if  $n$ is even} \\ 3n+1, & \text{if  $n$ is odd} \end{cases} $$

双\\公式内换行,cases实现大括号右多行赋值,&用来对齐。

MathJax公式自动编号

上面mathjax.ejs脚本中已加入公式编号的配置。
书写时只要使用begin{equation}环境就会自动编号:

1
2
3
4
$$
\begin{equation}
\end{equation}
$$

注意此时会自动将文档内的所有begin{equation}公式连续编号,例如:

1
2
3
4
5
6
7
8
9
10
$$
\begin{equation}
\sum_{i=0}^n F_i \cdot \phi (H, p_i) - \sum_{i=1}^n a_i \cdot ( \tilde{x_i}, \tilde{y_i}) + b_i \cdot ( \tilde{x_i}^2 , \tilde{y_i}^2 )
\end{equation}
$$
$$
\begin{equation}
\beta^*(D) = \mathop{argmin} \limits_{\beta} \lambda {||\beta||}^2 + \sum_{i=1}^n max(0, 1 - y_i f_{\beta}(x_i))
\end{equation}
$$

$$
\begin{equation}
\sum_{i=0}^n F_i \cdot \phi (H, p_i) - \sum_{i=1}^n a_i \cdot ( \tilde{x_i}, \tilde{y_i}) + b_i \cdot ( \tilde{x_i}^2 , \tilde{y_i}^2 )
\end{equation}
$$
$$
\begin{equation}
\beta^*(D) = \mathop{argmin} \limits_{\beta} \lambda {||\beta||}^2 + \sum_{i=1}^n max(0, 1 - y_i f_{\beta}(x_i))
\end{equation}
$$

禁止自动编号

在end{equation}前加\nonumber可禁止对此公式自动编号,例如:

1
2
3
4
5
6
7
8
9
10
11
$$
\begin{equation}
\sum_{i=0}^n F_i \cdot \phi (H, p_i) - \sum_{i=1}^n a_i \cdot ( \tilde{x_i}, \tilde{y_i}) + b_i \cdot ( \tilde{x_i}^2 , \tilde{y_i}^2 )
\nonumber
\end{equation}
$$
$$
\begin{equation}
\beta^*(D) = \mathop{argmin} \limits_{\beta} \lambda {||\beta||}^2 + \sum_{i=1}^n max(0, 1 - y_i f_{\beta}(x_i))
\end{equation}
$$

MathJax公式手动编号

可以在公式书写时使用\tag{手动编号}添加手动编号,例如:

1
2
3
4
5
$$
\begin{equation}
\sum_{i=0}^n F_i \cdot \phi (H, p_i) - \sum_{i=1}^n a_i \cdot ( \tilde{x_i}, \tilde{y_i}) + b_i \cdot ( \tilde{x_i}^2 , \tilde{y_i}^2 ) \tag{1.2.3}
\end{equation}
$$

$$
\begin{equation}
\sum_{i=0}^n F_i \cdot \phi (H, p_i) - \sum_{i=1}^n a_i \cdot ( \tilde{x_i}, \tilde{y_i}) + b_i \cdot ( \tilde{x_i}^2 , \tilde{y_i}^2 ) \tag{1.2.3}
\end{equation}
$$

其它详见参考原文

支付宝打赏 微信打赏 QQ钱包打赏

感觉不错?欢迎给我 打个赏~我将不胜感激!