对 NexT 主题来说,是支持 MathJax 的,但是感觉不够清真:
本文尝试利用 gulp 和 gulp-mathjax-page 将公式直接渲染为 SVG 并嵌入 HTML,以实现静态化,支持任何 Hexo 主题。同时,支持化学方程式?。
注意:发现有人写了一个 Hexo 插件 hexo-filter-mathjax-ssr(Server-Side Render),可以先去尝试它。当然,如果你发现显示的样式有问题,可以参考我下文给出的 CSS 样式,自行加上。
1)安装
1 2 | ~/blog $ npm i -g gulp@3.9.1 ~/blog $ npm i -S gulp@3.9.1 gulp-mathjax-page |
---|
2)新建
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | // 文件位置:~/blog/gulpfile.js var gulp = require('gulp') var mathjax = require('gulp-mathjax-page') gulp.task('mathjax', function() { gulp.src('./public/**/*.html') .pipe(mathjax({ mjpageConfig: { format: ['TeX'], singleDollars: true, cssInline: false, mhchem: {legacy: true} }, mjnodeConfig: { svg: true, css: false, speakText: false } })) .pipe(gulp.dest('./public')) }) |
---|
3)样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* 文件位置:~/blog/themes/next/source/css/_custom/custom.styl */ .mjpage__block { display: inline-block; text-align: center; width: 100%; overflow-x: auto; vertical-align: bottom; } /* 如果出现尺寸过大的问题,则加上以下代码 */ .mjpage { font-size: 10px; } |
---|
4)使用
1 | ~/blog $ hexo clean && hexo g && gulp mathjax && hexo d |
---|
本地无法在浏览器直接 hexo s
查看预览,但可以 gulp mathjax
后去 public 文件夹下找到相应文件并用浏览器打开预览。当然,这样预览过于麻烦了,所以建议直接用 Mathjax 官网的 Live Demo 预览,部署前再用上面这种方法确认一遍即可。
注意:我已从 Hexo 迁移到 Hugo,下面的公式是由 ${\KaTeX}$ 在线渲染的,而非 SVG。
爱因斯坦场方程:
$$ G_{μν} = R_{μν} - \frac{1}{2}g_{μν}R = -κT_{μν} $$
克莱因—戈登(Klein-Gordon)方程,描述玻色子:
$$ -h^2\frac{\partial^2}{\partial{t}^2}\psi(r,t) = [-h^2c^2\frac{\partial^2}{\partial{r}^2}+m^2c^4]\psi(r,t) $$
上面方程是时间和空间的二阶导数,不简洁,于是狄拉克将之化为时间和空间的一阶导数,狄拉克(Dirac)方程,描述费米子:
$$ i\hbar\frac{\partial}{\partial{t}}\psi(r,t) = [-i\hbar{c}\alpha\cdot\frac{\partial}{\partial{r}}+mc^2\beta]\psi(r,t) $$
物理学的大前提:自然规律应该是简洁的!
麦克斯韦方程组:
$$ \begin{cases} \nabla\times\mathbf{E} &= -\frac{\partial\mathbf B}{\partial t} \\ \nabla\times\mathbf{B} &= \mu_0\mathbf{J} + \mu_0\epsilon_0\frac{\partial\mathbf E}{\partial t} \\ \nabla\cdot\mathbf{E} &= \frac{\rho}{\epsilon_0} \\ \nabla\cdot\mathbf{B} &= 0 \end{cases} $$
四个独立方程按上面顺序分别是:法拉第电磁感应定律、毕奥沙伐尔定律、库仑定律、磁场无源场。
麦克斯韦为了解释电容器可以通交流这个现象,在毕奥沙伐尔定律后面加上 $\mu_0\epsilon_0\frac{\partial\mathbf E}{\partial t}$(位移电流假说),于是将本来独立的四个方程紧紧联系在一起,构成一个方程组。
用微积分解微分方程,得到两个波动方程:
$$ \frac{\partial^{2}\mathbf E_x}{\partial\mathbf Z^{2}} - \partial\partial_0\mu\mu_0\frac{\partial^{2}\mathbf E_x}{\partial t^{2}} = 0 $$
$$ \frac{\partial^{2}\mathbf H_y}{\partial\mathbf Z^{2}} - \partial\partial_0\mu\mu_0\frac{\partial^{2}\mathbf H_y}{\partial t^{2}} = 0 $$
上面第一个方程是电场的,第二个是磁场的。
牛顿的时候波动方程的结论:
麦克斯韦计算得出:
$$ ν = \frac{1}{\sqrt{\partial\partial_0\mu\mu_0}} \approx 300000 (km/s) $$
于是麦克斯韦预言:
今天突然想到能否写化学方程式呢?Google 后,发现有一个叫 mhchem 的 MathJax 的插件可以实现,说明见此插件的手册。可是怎么在 Hexo 中使用呢?回到刚刚 Google 的页面,发现下面就有 MathJax 的文档,阅读后尝试一下,发现挺简单的,连我这个代码小白都会:加上 mhchem: {legacy: true}
即可。
效果:
$$ \ce{SO4^2- + Ba^2+ -> BaSO4 v} $$
当然,这个插件的应用不止化学方程,还可以写物理中的核反应,比如原子弹?:
$$ n + \ce{ ^{235}_{92} U -> ^{144}_{56} Ba + ^{89}_{36} Kr } + 3n + 200\;Mev $$
太阳中氢转换成氦的三个反应:
$$ \begin{cases} \begin{aligned} &&\ce{ ^{1} H + ^{1} H & -> ^{2} D } + e^{+} + ν \\ \text{then}\;&&\ce{ ^{2} D + ^{1} He & -> ^{3} He } + \gamma \\ \text{then}\;&&\ce{ ^{3} He + ^{3} He & -> ^{4} He + ^{1} H + ^{1} H } \end{aligned} \end{cases} $$
第一个反应是一个弱相互作用,反应概率很低的一个过程,这就是现在太阳不会爆炸而是缓慢「燃烧」的原因。微观粒子的研究成果(弱相互作用)竟然能用在巨大的天体物理中,反映出研究粒子物理或高能物理的重要性,这也是目前物理学的前沿。
由于有些语法与 Markdown 语法的冲突,因此可能会有错误,建议加转义符,比如:下标 \_
,换行 \\\\
。如果还遇到莫名的报错,在适当位置加空格,然后调试直到没问题。同时,我发现如果想表示方程组(左边有花括号),用
\left\{
\begin{array}...\end{array}
\right.
会报错,估计是 \right.
的问题,不过可以用 \begin{cases}...\end{cases}
替代。
常用的网页:
Enjoy it! ☕