Qué es KaTeX

KaTeX es una biblioteca de JavaScript para mostrar fórmulas matemáticas estilo LaTeX en HTML.

Específicamente, puedes mostrar fórmulas como la siguiente.

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

Aunque parece haber otras bibliotecas para mostrar fórmulas matemáticas estilo LaTeX, KaTeX tiene la reputación de ser simple y rápida.

Cómo introducirlo en hugo

Crea un nuevo archivo layouts/partials/math.html en la jerarquía de carpetas de hugo.

El contenido debe ser el siguiente.

 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>

A continuación, añade el siguiente código al archivo existente layouts/partials/extend_head.html.

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

Ahora estás listo para usar KaTeX.

Al añadir math: true al front matter de la página, puedes habilitar KaTeX.

Todo lo que tienes que hacer es escribir las fórmulas matemáticas al estilo LaTeX en el cuerpo del artículo de la página.

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

Si lo escribes como arriba, se mostrará de la siguiente manera.

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

Cómo habilitar KaTeX (fórmulas matemáticas estilo LaTeX) en hugo

Qué es KaTeX

Cómo introducirlo en hugo

Referencias