在 Hexo 博客中更优雅地使用 LaTeX 数学公式
在 Hexo 博客中如何插入 LaTeX 数学公式早已是老生常谈,搜索引擎中涌现了许多解决方案,我也不想再造轮子。但是再与我使用的 Hexo 主题磨合时总是会出现一点的瑕疵。那么这次便记录下我是如何在 Hexo 中更优雅地使用 LaTeX 数学公式的。
问题描述
由于某些历史原因,我早已经将默认生成器 hexo-renderer-marked
换成 hexo-renderer-karmed
,效果一直不错。但是就在上次主题更新中,在插入过行内公式的段落字体会变为「代码字体」,也就是 _font.less
中的 @fontfamily_code
,是十分影响体验的。
但即便我规定代码字体跟随正文字体,还是会有布局缩进上的 bug 。插入过行内公式的段落会比一般段落开头多出一点空白,且上下也会多出一个换行。
![这是什么魔鬼排版](https://npm.elemecdn.com/hlg@0.0.0/20200306142957.png)
这是什么魔鬼排版
解决方案
很遗憾,尝试翻阅源代码时我没能找到导致问题的原因。所以我只能粗暴地替换掉解析器。在尝试了 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>
最后重新生成就能看到问题解决了。
![](https://npm.elemecdn.com/hlg@0.0.0/20200306143120.png)
优化
虽说上面的操作已经可以成功渲染了。但不像我专门维护的「笔记本」页面,在这个博客中真正需要渲染的页面目前只占了两篇,而为此让所有页面都加载这样一个 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-->
前面导致在主页中显示失败。
当然,权衡一下,这个缺点我还是愿意接受的。
评论