<!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="https://mivinci.github.io/hugo-theme-minima/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>Hugo on Minima - Math Typesetting</title><linkrel="shortcut icon"href=/hugo-theme-minima/favicon.icotype=image/x-icon><linkrel=stylesheethref=/hugo-theme-minima/minima.1667988240.css><scriptdefertype=text/javascriptsrc=/hugo-theme-minima/minima.1667988240.js></script></head><script>letsystemColorScheme=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';try{document.querySelector('html').classList.add(systemColorScheme),localStorage.setItem('theme',systemColorScheme)}catch(a){console.error(a)}</script><body><headerclass="mt-3 mb-6"><divclass="container mx-auto"><navclass="flex justify-between items-center"><divclass="flex items-center"><divid=theme-switchclass="text-3xl cursor-pointer">🌝</div></div><ulclass="flexitems-centerfont-medium
whitespace-nowrap overflow-x-auto overflow-y-hidden"><liclass="ml-1 mr-1"><ahref=/hugo-theme-minima/tags>Tags</a></li><liclass="ml-1 mr-1"><ahref=/hugo-theme-minima/series>Series</a></li></ul><ulclass="flex item-center text-sm font-bold"><liclass=ml-2><ahref=https://mivinci.github.io/hugo-theme-minima/>EN</a></li><liclass=ml-2><ahref=https://mivinci.github.io/hugo-theme-minima/zh-cn/>ZH</a></li></ul></nav></div></header><divclass="container mx-auto"><h1class="text-4xl font-extrabold mt-6 mb-6">Math Typesetting</h1><divclass="mb-3 text-sm flex justify-between"><div>Post at — Jul 18, 2021</div><div><aclass=ml-1href=/hugo-theme-minima/tags/KaTex>#KaTex</a></div></div><mainclass=mb-8><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:
