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


我曾想把梅西打造为世界最佳球员,但梅西却把我送上了世界最佳教练的宝座上。 ——瓜迪奥拉