TechOverflow Logo
TechOverflow

Comment inclure KaTeX 0.16 dans Hugo (rendu LaTeX)

English Deutsch 简体中文 Español Українська Čeština Português Русский Français

Ce post montre comment inclure la dernière version de KaTeX (0.16) dans Hugo pour le rendu mathématique LaTeX. Nous ne l’incluons pas depuis un CDN principalement pour des raisons de RGPD, mais aussi parce que c’est plus rapide à charger depuis le serveur local.

Nous inclurons katex.min.js, auto-render.min.js, katex.min.css depuis le dossier assets et fonts depuis le dossier static (afin que Hugo ajoute tout le répertoire).

Note : Dans les versions de Hugo avant v0.162.0, la création de liens symboliques de fichiers depuis node_modules vers les dossiers assets et static était une approche courante. Cependant, à partir de v0.162.0, Hugo rejette les entrées liées symboliquement dans resources.Get pour des raisons de sécurité (CVE-2026-50135), donc les montages de module sont maintenant l’approche correcte.

D’abord, installez katex via npm :

npm_install_katex.sh
npm install --save katex

Ensuite, ajoutez les montages de module à votre hugo.yaml pour monter le répertoire dist de katex dans assets/vendor/katex et les fonts dans static/css/fonts :

hugo.yaml
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

Important : Quand vous définissez module.mounts, tous les montages par défaut sont remplacés — donc vous devez explicitement remonter assets et static comme montré ci-dessus.

Maintenant créez themes/your-theme/layouts/partials/katex.html :

katex_hugo_partial.html
<!-- Include library -->
<link rel="stylesheet" href="{{ (resources.Get "vendor/katex/katex.min.css").RelPermalink }}" />
<script defer src="{{ (resources.Get "vendor/katex/katex.min.js").RelPermalink }}"></script>
<!-- Include auto-render extension & render all KaTeX formulae !-->
<script defer src="{{ (resources.Get "vendor/katex/contrib/auto-render.min.js").RelPermalink }}" onload="renderMathInElement(document.body);"></script>

Dans themes/your-theme/layouts/partials/footer.html, incluez conditionnellement le partial :

katex_footer_partial.html
<!-- Include KaTeX if enabled in post-->
{{ if .Params.katex }}
    {{ partial "katex.html" . }}
{{ end }}

Ensuite, dans votre fichier de post .md, définissez

katex_frontmatter.yaml
katex: true

dans le frontmatter pour activer le rendu KaTeX.

Maintenant vous pouvez ajouter une formule telle que

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

à votre post pour la voir rendue par KaTeX :

$$\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$
Consultez les articles similaires par catégorie : Hugo