之前在用 markdown 写东西的时候会下意识避免使用 LaTeX 语法。
因为尽管当前使用的 Typora 对 LaTeX 的支持还不错,但是当前使用的 hexo 的主题 Typography 并不支持。
最近觉得对于有些场景,还是使用 LaTeX 展示效果会更好,所以决定为当前主题添加 LaTeX 支持。
混乱不一的内容
从多篇文章内容来看,大部分都是基于安装 hexo-math 插件实现的。
但是部分文章中会提及需要把渲染引擎从 hexo-renderer-marked 更换到 hexo-renderer-kramed。
并且有些文章中会要求不使用 hexo-math,而是使用 hexo-renderer-mathjax。
最后添加或是修改 _config.yml
中的配置,而所需的配置内容的格式层级却又相差甚远。
最重要的是,大部分文章均没有指明 hexo 或者各种各种插件的版本号。
在测试中踩了一些坑,这里给出一些问题的总结。
先说结论,如果你的 hexo 版本比较老,使用的主题比较老,那么请按照下一节中内容来实现对 LaTeX 的支持。
如果你使用的主题是 next,那么按照本节的操作来也可以。
如果想要安装 hexo-math,首先应当注意你的 hexo 版本。
比如我的 hexo 很多年没有升级过,停留在 3.8.0
,如果直接执行 npm install hexo-math --save
,在运行 hexo 命令时必然会报错。
查看 hexo-math 的 readme 可知,安装条件是需要 hexo 版本在 5 之上。
对于我的 hexo 环境来说,如果要安装,应该安装 3.0.4
版本的 hexo-math。
也正是因为版本不同,在 _config.yml
中的需要添加的配置内容才会不同。
注意这里指的是 blog 下根目录的配置文件,不是 themes 下的。
接下来大部分的文章中都会说「修改」主题下 _config.yml
,开启 mathjax,并给出如下的配置内容。
# MathJax Support
mathjax:
enable: true
per_page: false
cdn:
并在文章标题中加入配置。
---
title:
mathjax: true
---
注意说的是「修改」,而不是「增加」,而我使用的主题下的配置文件中,根本没有这个配置来让我修改。
那么直接把这个配置加进去可以吗?答案是否定的。
这就是第二个问题,比较老,尤其是小众的主题,是不支持 mathjax 的。
因为我曾经使用过 next ── 这是一款使用人数较多,功能比较完善,至今仍在维护的主题。
所以我尝试直接切换到 next,并且在 next 下的配置文件中找到并修改 mathjax 配置,此时已经可以正常显示数学公式了。
很显然就是主题不支持的问题。
顺便一提,不要尝试 hexo-renderer-kramed 替换掉 hexo-renderer-marked 之类的操作。
hexo-renderer-kramed、hexo-renderer-mathjax 已经七、八年没有人维护了,而 hexo-renderer-marked 作为 hexo 默认的 markdown 渲染器,是在不断更新维护的。
对于不支持 mathjax 的主题,应当如何实现对 LaTeX 的支持呢?
修改 layout 模板配置以使用 Mathjax
实现思路是在主题的 layout 下面增加模板文件,在模板文件中完成引用 mathjax.js,并做相应设置,然后在 post 模板中引用新增加的模板文件。
需要注意的是,不同主题使用的模板引擎可能是不同的,我当前主题使用的是 Jade,也有很多主题使用的是 EJS。
模板引擎不同就意味着模板文件的后缀,以及模板文件中语法不同,理解实现思路,并做对应的修改即可。
在主题下的 layout 文件夹下新增 mathjax.jade,内容如下。
if theme.mathjax.enable
script.
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
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='#{theme.mathjax.cdn}' async)
修改 page.jade,引用新增的模板。
include mixins
extends partial/layout
block site_title
!= page.title + " · " + config.title
block description
- var desc = page.desc || strip_html(page.content).replace(/^\s*/, '').replace(/\s*$/, '').substring(0, 150);
meta(name="description", content=desc)
block content
.autopagerize_page_element: .content: .post-page
include mixins
+make_post(page, true)
- var prev = page.prev ? page.prev.path : false;
- var next = page.next ? page.next.path : false;
.pagination
p.clearfix
if prev
span.pre.pagbuttons
a(role="navigation",href=url_for(prev), title=page.prev.title)
i.fa.fa-angle-double-left
|
!= __('prev_post')+': ' + page.prev.title
if next
span
span.next.pagbuttons
a(role="navigation",href=url_for(next), title=page.next.title)
!= __('next_post')+': ' + page.next.title
|
i.fa.fa-angle-double-right
if theme.mathjax.enable
include mathjax
include partial/comments
在主题下的 _config.yml
中加入 mathjax 配置,对应模板内容中所取的启用标识和 cdn 地址。
mathjax:
enable: true
cdn: https://cdn.jsdelivr.net/npm/[email protected]/MathJax.js?config=TeX-AMS-MML_HTMLorMML
显然当前的逻辑是在 post 模板中,基于主题配置文件中的配置,来判断是否要开启 mathjax 支持,所以文章的标题中不需要新加入任何配置。
至此修改完成。