<!doctype html><htmllang=en><head><metacharset=utf-8><metaname=viewportcontent="width=device-width,initial-scale=1"><metaproperty="og:title"content="Math Typesetting"><metaproperty="og:description"content="A brief guide to setup KaTeX"><metaproperty="og:type"content="article"><metaproperty="og:url"content="http://h.xjj.pub/math-typesetting/"><metaproperty="article:section"content><metaproperty="article:published_time"content="2021-07-18T10:52:59+08:00"><metaproperty="article:modified_time"content="2021-07-18T10:52:59+08:00"><metaname=twitter:cardcontent="summary"><metaname=twitter:titlecontent="Math Typesetting"><metaname=twitter:descriptioncontent="A brief guide to setup KaTeX"><metaname=theme-colormedia="(prefers-color-scheme: light)"content="#ffffff"><metaname=theme-colormedia="(prefers-color-scheme: dark)"content="#262d33"><title>Hi Folks - Math Typesetting</title><linkrel="shortcut icon"href=/favicon.icotype=image/x-icon><linkrel=preconnecthref=https://fonts.googleapis.com><linkrel=preconnecthref=https://fonts.gstatic.comcrossorigin><linkhref="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap"rel=stylesheet><linkrel=stylesheethref=/minima.1630047751.css><scriptdefertype=text/javascriptsrc=/minima.1630047751.js></script></head><script>try{'theme'inlocalStorage||(localStorage.theme=window.matchMedia('(prefer-color-scheme: dark)').matches?'dark':'light'),document.querySelector('html').classList.add(localStorage.theme)}catch(a){console.error(a)}</script><body><header><h1class="row gap-1 nowrap"><divid=theme-switcherclass="btn lg-1"></div>Hi Folks</h1><navclass=row><aclass=mr-1href=/>Home</a>
<aclass=mr-1href=/categories>Categories</a>
<aclass=mr-1href=/series>Series</a>
<aclass=mr-1href=/about>About</a></nav><hr></header><main><h1>Math Typesetting</h1><divclass="sm-1 mtb-1">Posted at — Jul 18, 2021</div><p>A brief guide to setup KaTeX</p><articleclass=md><p>Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.</p><p>In this example we will be using <ahref=https://katex.org/>KaTeX</a></p><ul><li>Create a partial under <code>/layouts/partials/math.html</code></li><li>Within this partial reference the <ahref=https://katex.org/docs/autorender.html>Auto-render Extension</a> or host these scripts locally.</li><li>Include the partial in your templates like so:</li></ul><divclass=highlight><divclass=chroma><tableclass=lntable><tr><tdclass=lntd><preclass=chroma><code><spanclass=lnt>1
</span></code></pre></td><tdclass=lntd><preclass=chroma><codeclass=language-bashdata-lang=bash><spanclass=o>{{</span><spanclass=k>if</span> or .Params.math .Site.Params.math <spanclass=o>}}</span>
</code></pre></td></tr></table></div></div><ul><li>To enable KaTex globally set the parameter <code>math</code> to <code>true</code> in a project’s configuration</li><li>To enable KaTex on a per page basis include the parameter <code>math: true</code> in content files</li></ul><p><strong>Note:</strong> Use the online reference of <ahref=https://katex.org/docs/supported.html>Supported TeX Functions</a></p><h3id=examples>Examples</h3><p>Block math:
