hugo 如何使用 KaTeX 来显示数学公式

hugo / katex / markdown

如果你需要在 hugo 中输入一些公式，那么 KaTeX 是个不错的选择，不过我们需要做一些准备工作

测试

我建议参考本文前，你可以先试一下，也许哪一天，hugo 就内嵌公式输入了，比如我们输个勾股定理：

$$ a^2 + b^2 = c^2 $$

如果 hugo 解析出来，还是 $$ a^2 + b^2 = c^2 $$ 这样，那我们就继续吧。

开始

1. 添加 partial template katex.html

首先我们把 KaTeX 所需的脚本文件放入新建的模板 katex.html 中， 当前最新的脚本文件可以在这里找到。 我的模板内容如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
  integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"
  integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"
  integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
  onload="renderMathInElement(document.body);"></script>

2. header 引用 katex.html

找到我们的 header 模板，加入对 katex.html 的引用

{{ if .Params.katex }}
  {{ partial "katex.html" . }}
{{ end }}

这里用了 if 条件，如果设置了 katex 才会导入 katex.html 中的脚本，我们可以在文章中设置启用：

---
title: "How to Make Hugo Support Katex"
date: 2023-04-06T10:18:41+08:00
author: ["tricks1"]
tags: [""]
draft: true
katex: true
---

这时我们再跑一下 hugo，我们就可以看到勾股定理的公式了。

3. 启用行内公式

接下来我们再试试行内公式 $a^2+b^2=c^2$，notion 中的行内公式是这个格式：$a^2+b^2=c^2$。 好像还是不行，没关系，我们再修改一下我们的脚本：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
  integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"
  integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"
  integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
  onload="renderMathInElement(document.body);"></script>
<script defer>
  document.addEventListener("DOMContentLoaded", function () {
    renderMathInElement(document.body, {
      delimiters: [
        { left: "$$", right: "$$", display: true },
        { left: "$", right: "$", display: false }
      ]
    });
  });
</script>

这样是不是就可以了？

总结

这篇文章介绍了如何在 Hugo 中使用 KaTeX 支持公式输入。 首先需要添加一个 partial template katex.html，然后在 header 中引用它。 还需要修改脚本以支持行内公式。最后，可以在文章中设置启用 katex。

以上总结为 Notion AI 生成，我的总结如下：

为 hugo 启用 KaTeX 来输入数学公式，需要以下三个步骤：

  1. 创建 katex.html 填入引用脚本和样式
  2. 帖子的 header 模板中根据条件引用 katex.html
  3. 帖子中打开 katex 参数