如果你需要在 hugo 中输入一些公式,那么 KaTeX 是个不错的选择,不过我们需要做一些准备工作
我建议参考本文前,你可以先试一下,也许哪一天,hugo 就内嵌公式输入了,比如我们输个勾股定理:
$$ a^2 + b^2 = c^2 $$
如果 hugo 解析出来,还是 $$ a^2 + b^2 = c^2 $$
这样,那我们就继续吧。
首先我们把 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>
找到我们的 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,我们就可以看到勾股定理的公式了。
接下来我们再试试行内公式 $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 来输入数学公式,需要以下三个步骤: