Cómo incluir KaTeX 0.16 en Hugo (renderizado LaTeX)

Este post muestra cómo incluir la última versión de KaTeX (0.16) en Hugo para renderizar matemáticas LaTeX. No lo incluimos desde un CDN principalmente por razones de GDPR, pero también porque es más rápido cargarlo desde el servidor local.

Incluiremos katex.min.js, auto-render.min.js, katex.min.css desde la carpeta assets y fonts desde la carpeta static (para que Hugo añada el directorio completo).

Nota: En versiones de Hugo anteriores a v0.162.0, symlinking archivos desde node_modules a las carpetas assets y static era un enfoque común. Sin embargo, empezando con v0.162.0, Hugo rechaza entradas symlinked en resources.Get por razones de seguridad (CVE-2026-50135), así que module mounts son ahora el enfoque correcto.

Primero, instala katex vía npm:

npm install --save katex

Luego, añade module mounts a tu hugo.yaml para montar el directorio dist de katex en assets/vendor/katex y las fonts en static/css/fonts:

module:
  mounts:
    - source: assets
      target: assets
    - source: static
      target: static
    - source: node_modules/katex/dist
      target: assets/vendor/katex
    - source: node_modules/katex/dist/fonts
      target: static/css/fonts

Importante: Cuando defines module.mounts, todos los mounts por defecto son reemplazados — así que debes re-montar explícitamente assets y static como se muestra arriba.

Ahora crea themes/your-theme/layouts/partials/katex.html:

<!-- Incluir librería -->
<link rel="stylesheet" href="{{ (resources.Get "vendor/katex/katex.min.css").RelPermalink }}" />
<script defer src="{{ (resources.Get "vendor/katex/katex.min.js").RelPermalink }}"></script>
<!-- Incluir extensión auto-render y renderizar todas las fórmulas KaTeX !-->
<script defer src="{{ (resources.Get "vendor/katex/contrib/auto-render.min.js").RelPermalink }}" onload="renderMathInElement(document.body);"></script>

En themes/your-theme/layouts/partials/footer.html, incluye condicionalmente el partial:

<!-- Incluir KaTeX si está habilitado en el post-->
{{ if .Params.katex }}
    {{ partial "katex.html" . }}
{{ end }}

Luego, en tu archivo .md de post, establece

katex: true

en el frontmatter para habilitar el renderizado de KaTeX.

Ahora puedes añadir una fórmula como

$$\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$

a tu post para verla renderizada por KaTeX: