1. Posts/

Math Typesetting

·1 min·

Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.

In this example we will be using KaTeX .

  • Create a partial at layouts/_partials/extend-head.html; the theme includes it in the <head> of every page
  • Within this partial reference the Auto-render Extension or host these scripts locally, and load them only on the pages that need them:
{{ if or .Params.math .Site.Params.math }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/contrib/auto-render.min.js"
    onload="renderMathInElement(document.body);"></script>
{{ end }}
  • To enable KaTeX globally set the parameter math to true in a project’s configuration
  • To enable KaTeX on a per page basis include the parameter math: true in content files

Note: Use the online reference of Supported TeX Functions

Examples

Inline math: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\)

Block math:

$$ \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } $$