TechOverflow Logo
TechOverflow

Wie man KaTeX 0.16 in Hugo einbindet (LaTeX-Rendering)

English 简体中文 Deutsch

Dieser Beitrag zeigt, wie man die neueste Version von KaTeX (0.16) in Hugo zum Rendern von LaTeX-Mathematik einbindet. Wir binden es nicht von einem CDN ein, hauptsächlich aus DSGVO-Gründen, aber auch weil es schneller ist, es vom lokalen Server zu laden.

Wir werden katex.min.js, auto-render.min.js, katex.min.css aus dem assets-Ordner und fonts aus dem static-Ordner einbinden (sodass Hugo das gesamte Verzeichnis hinzufügt).

Hinweis: In Hugo-Versionen vor v0.162.0 war das Symlinking von Dateien aus node_modules in die assets- und static-Ordner ein gängiger Ansatz. Ab v0.162.0 lehnt Hugo jedoch symlinked-Einträge in resources.Get aus Sicherheitsgründen (CVE-2026-50135) ab, sodass Modul-Mounts nun der korrekte Ansatz sind.

Installieren Sie zuerst katex via npm:

npm_install_katex.sh
npm install --save katex

Fügen Sie dann Modul-Mounts zu Ihrer hugo.yaml hinzu, um das katex-dist-Verzeichnis in assets/vendor/katex und die Fonts in static/css/fonts einzubinden:

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

Wichtig: Wenn Sie module.mounts definieren, werden alle Standard-Mounts ersetzt — Sie müssen also assets und static explizit neu mounten, wie oben gezeigt.

Erstellen Sie jetzt 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>

Binden Sie in themes/your-theme/layouts/partials/footer.html das Partial bedingt ein:

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

Setzen Sie dann in Ihrer Post-.md-Datei

katex_frontmatter.yaml
katex: true

im Frontmatter, um das KaTeX-Rendering zu aktivieren.

Jetzt können Sie eine Formel wie

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

zu Ihrem Post hinzufügen, um sie von KaTeX gerendert zu sehen:

$$\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$
Check out similar posts by category: Hugo