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 under
/layouts/partials/math.html
- Within this partial reference the Auto-render Extension or host these scripts locally.
- Include the partial in your templates like so:
1
2
3
|
{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ 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
1
2
3
4
5
6
7
8
|
{{< math.inline >}}
{{ if or .Page.Params.math .Site.Params.math }}
<!-- KaTeX -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
{{ end }}
{{</ math.inline >}}
|
Examples
Inline math: $\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…$
Block math:
$$
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
$$