在 Hexo 博客中更优雅地使用 LaTeX 数学公式

2020-03-06 便签格

在 Hexo 博客中如何插入 LaTeX 数学公式早已是老生常谈,搜索引擎中涌现了许多解决方案,我也不想再造轮子。但是再与我使用的 Hexo 主题磨合时总是会出现一点的瑕疵。那么这次便记录下我是如何在 Hexo 中更优雅地使用 LaTeX 数学公式的。

问题描述#

由于某些历史原因,我早已经将默认生成器 hexo-renderer-marked 换成 hexo-renderer-karmed ,效果一直不错。但是就在上次主题更新中,在插入过行内公式的段落字体会变为「代码字体」,也就是 _font.less 中的 @fontfamily_code ,是十分影响体验的。

但即便我规定代码字体跟随正文字体,还是会有布局缩进上的 bug 。插入过行内公式的段落会比一般段落开头多出一点空白,且上下也会多出一个换行。

解决方案#

很遗憾,尝试翻阅源代码时我没能找到导致问题的原因。所以我只能粗暴地替换掉解析器。在尝试了 4、5 个解析器后,我找到了一个组合,能规避以上问题,且对 LaTeX 支持良好,那就是 hexo-renderer-markdown-it-plus 。很巧的是,这个解析器正是官方文档中说明万一主题内置的 LaTeX 解析器不工作时建议替换成为的,稳定性应该是有所见证。

首先在博客根目录打开终端,卸原有的解析器,并安装 hexo-renderer-markdown-it-plus

npm i -S hexo-renderer-markdown-it-plus

紧接着在博客配置文件中追加以下内容:

markdown_it_plus:
highlight: true
html: true
xhtmlOut: true
breaks: false
langPrefix:
linkify: true
typographer: false
quotes:
plugins:
- plugin:
name: markdown-it-mark
enable: false

关于每个选项的作用请前往 GitHub 页面查看,我就不照搬了。

再然后往主题文件夹下的 layout/_partial/head.ejs 中插入:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>

最后重新生成就能看到问题解决了。

优化#

虽说上面的操作已经可以成功渲染了。但不像我专门维护的「笔记本」页面,在这个博客中真正需要渲染的页面目前只占了两篇,而为此让所有页面都加载这样一个 js 和 css ,似乎有点不划算。

所以我决定根据页面 Front-matter 中的 mathjax 参数来判断是否需要开启 LaTeX 支持,这只需要将上述两行的代码改为:

<% if (page.mathjax) { %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<% } %>

然后在需要渲染的页面 Front-matter 中加上 mathjax: true (也就是原主题默认打开方式)便可渲染指定页面。

这样不需要的页面就不会加载这个组件导致拖慢访问速度了。

但是缺点也很明显,只有在文章页面能成功渲染,也就是不能让公式放在 <!--more--> 前面导致在主页中显示失败。

当然,权衡一下,这个缺点我还是愿意接受的。

本文作者:ChrAlpha

本文链接: https://blog.ichr.me/post/fix-mathjax-layout-bugs-in-hexo/

文章默认采用 CC BY-NC-SA 4.0 协议进行许可,使用时请注意遵守协议。

便签格

评论

您所在的地区可能无法访问 Disqus 评论系统,请切换网络环境再尝试。