[hugo]KaTex Intergration
keywords:hugo, KaTex, Math Equation, Mathematics
Steps:
-
Create a partial under
/layouts/partials/math.html
. -
Within this partial reference the Auto-render Extension or host these scripts locally.
e.g. in/layouts/partials/math.html
:<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.0/dist/katex.min.css" integrity="sha384-BdGj8xC2eZkQaxoQ8nSLefg4AV4/AwB3Fj+8SUSo7pnKP6Eoy18liIKTPn9oBYNG" crossorigin="anonymous"> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.0/dist/katex.min.js" integrity="sha384-JiKN5O8x9Hhs/UE5cT5AAJqieYlOZbGT3CHws/y97o3ty4R7/O5poG9F3JoiOYw1" crossorigin="anonymous"></script> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.0/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
-
Add source in your your templates, e.g. theme’s
header.html
:{{ if or .Params.math .Site.Params.math }} {{ partial "math.html" . }} {{ end }}
-
Enable math in your content files.
markup= "mmark"
math= "true"
Then KaTex would works, Testing:
$$\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }$$
$$\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }$$
Reference
Supported Functions
https://katex.org/docs/supported.html
Math Typesetting
https://github.com/gohugoio/hugoBasicExample/blob/master/content/post/math-typesetting.mmark
我曾想把梅西打造为世界最佳球员,但梅西却把我送上了世界最佳教练的宝座上。 ——瓜迪奥拉