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

在 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 （也就是原主题默认打开方式）便可渲染指定页面。

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

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

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