Hexo-NexT主题下MathJax渲染优化

mathjax

本文主要对MathJax渲染进行优化,以解决NexT主题下使用MathJax遇到的种种问题。

背景

在使用MathJax框架的过程中,我曾遇到了不少的问题,现在进行一些改进。

主要涉及到以下内容:

  • 动态渲染改为静态渲染,从而节约渲染所需的大量时间。

  • 显示方式固定为svg,使得能够在各种环境下正常显示。

  • 支持化学方程式。

  • 解决公式过长超出文章宽度的问题。

  • 取消右键菜单。

下面是实现效果:

原版:

pre

pre2

改进后:

fixed

fixed2

全面优化方法

该优化方法将解决上述所有问题。

我们需要三个插件的支持,在站点根目录下,依次执行下列命令:

1
2
3
$ npm install jsdom -s
$ npm install deasync -s
$ npm install mathjax-node-page -s

最好指明版本:

1
2
3
jsdom@11.12.0
deasync@0.1.13
mathjax-node-page@3.0.0

三个插件安装完毕。

接下来,在站点根目录下新建scripts文件夹,在scripts目录下新建jax.js文件,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const mjpage = require('mathjax-node-page').mjpage
const deasync = require('deasync')

hexo.extend.filter.register(
'after_render:html',
str => {
let data = null
mjpage(
str,
{
format: ['TeX'],
singleDollars: true,
cssInline: false,
mhchem: { legacy: true }
},
{ svg: true, css: false, speakText: false },
x => (data = x)
)
deasync.loopWhile(() => data === null)
return data
},
100
)

然后进入themes\next\source\css\_custom,修改custom.styl文件,增加以下内容:

1
2
3
4
5
6
7
.mjpage__block {
display: block;
text-align: center;
width: 100%;
overflow-x: auto;
vertical-align: bottom;
}

然后,NexT自带的MathJax可以关掉,主题配置文件内:

1
2
mathjax:
enable: false

大功告成,看一下实现效果:

N-S方程矢量形式:

1
$$\rho \frac {dv} {dt} = \nabla p + p F + \mu\Delta v$$

$$\rho \frac {dv} {dt} = \nabla p + p F + \mu\Delta v$$

生成硫酸钡:

1
$$\ce{SO4^2- + Ba^2+ -> BaSO4 v}$$

$$\ce{SO4^2- + Ba^2+ -> BaSO4 v}$$

支持化学方程式

该优化只解决化学方程式问题。

如果只是想支持化学方程式的话,只需要增加一个extension,参见官方文档:

文档

我们只需要在themes\next\layout\_third-party\mathjax.swig 中增加一段:

1
2
3
TeX: {
extensions: ["mhchem.js"]
}

也就是将mathjax.swig修改为:

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
{% if theme.mathjax.enable %}
{% if not theme.mathjax.per_page or (page.total or page.mathjax) %}
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
- }
+ },
+ TeX: {
+ extensions: ["mhchem.js"]
+ }
});
</script>

<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>
<script type="text/javascript" src="{{ theme.mathjax.cdn }}"></script>
{% endif %}
{% endif %}

超过文章主体宽度

该优化只解决公式超过文章宽度问题。

进入themes\next\source\css\_custom,修改custom.styl,增加如下内容即可:

1
2
3
.MathJax_Display{
overflow: scroll;
}

如果不是以HTML-CSS形式渲染则需修改MathJax_Display,如SVG形式渲染则为MathJax_SVG_Display

以SVG形式渲染

该优化只解决以SVG形式渲染问题。

只需修改MathJax的CDN为:

//cdn.bootcss.com/mathjax/2.7.5/latest.js?config=TeX-MML-AM_SVG(把原来设置的CDN链接末尾改为_SVG即可)

若要防止超出宽度,之前修改的custom.stylMathJax_Display需相应改为MathJax_SVG_Display

注:本NexT版本为5.1.4。

最后更新于19-01-24
助力本站发展