Como habilitar KaTeX (exibição de fórmulas no estilo LaTeX) no hugo

Fri, 31 Mar 2023 23:11:26 +0900

O que é KaTeX

KaTeX é uma biblioteca javascript para exibir fórmulas no estilo LaTeX em HTML.

Especificamente, você pode exibir fórmulas como a abaixo.

$$f(x) = x^2 + x + 41$$

Parece haver outras bibliotecas de exibição de fórmulas no estilo LaTeX, mas o KaTeX tem a reputação de ser simples e rápido.

Como introduzir no hugo

Crie um novo layouts/partials/math.html na hierarquia de pastas do hugo.

O conteúdo deve ser o seguinte.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


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

Em seguida, adicione o código abaixo ao arquivo existente layouts/partials/extend_head.html.

1
2
3


{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}

Agora você está pronto para usar o KaTeX.

Você pode habilitar o KaTeX adicionando math: true ao front matter da página.

Tudo o que resta é escrever a fórmula no estilo LaTeX no corpo do artigo da página.

1

$$ e^{i \pi} = -1 $$

Ao escrever como acima, será exibido como abaixo.

$$ e^{i \pi} = -1 $$

LaTeX on kenji.blog

Como habilitar KaTeX (exibição de fórmulas no estilo LaTeX) no hugo

O que é KaTeX

Como introduzir no hugo

Referência