Featured image of post Cómo integrar KaTeX en Hugo y mostrar hermosas fórmulas al estilo LaTeX
Matemáticas, Criptografía, Cuántica

Cómo integrar KaTeX en Hugo y mostrar hermosas fórmulas al estilo LaTeX

Explicamos los pasos para integrar "KaTeX", una librería de renderizado de fórmulas rápidas, en tu generador de sitios estáticos Hugo. Aprenderás fácilmente cómo activar la visualización de elegantes fórmulas matemáticas estilo LaTeX en tu blog, desde la creación de math.html hasta su configuración en el encabezado.

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

  1. 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>
  1. 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 }}
  1. Ahora estás listo para usar KaTeX.

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

  1. 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 $$

Referencias