<!doctype html><htmllang=en><head><metacharset=utf-8><metahttp-equiv=x-ua-compatiblecontent="IE=edge"><metaname=viewportcontent="width=device-width,initial-scale=1,shrink-to-fit=no"><title>Math Typesetting - PaperMod</title><metaname=descriptioncontent="Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries."><metaname=keywordscontent="/"><metaname=authorcontent="Hugo Authors"><linkrel=canonicalhref=https://adityatelange.github.io/hugo-PaperMod/posts/math-typesetting/><linkhref=https://adityatelange.github.io/hugo-PaperMod/assets/css/stylesheet.min.17993db319ec7e8f0f1cc1fa992a916d01e3c8836ebbfd6f6876d9bbe8f73603.cssintegrity="sha256-F5k9sxnsfo8PHMH6mSqRbQHjyINuu/1vaHbZu+j3NgM="rel="preload stylesheet"as=style><linkrel=apple-touch-iconhref=https://adityatelange.github.io/hugo-PaperMod/apple-touch-icon.png><linkrel=iconhref=https://adityatelange.github.io/hugo-PaperMod/favicon.ico><metaname=generatorcontent="Hugo 0.76.2"></head><bodyclass=singleid=top><script>if(localStorage.getItem("pref-theme")==="dark"){document.body.classList.add('dark');}elseif(localStorage.getItem("pref-theme")==="light"){document.body.classList.remove('dark')}else{if(window.matchMedia('(prefers-color-scheme: dark)').matches){document.body.classList.add('dark');}}</script><noscript><styletype=text/css>.theme-toggle,.top-link{display:none}</style></noscript><headerclass=header><navclass=nav><pclass=logo><ahref=https://adityatelange.github.io/hugo-PaperMod/>PaperMod</a>
<spanclass=theme-toggle><aid=theme-toggle><svgid="moon"xmlns="http://www.w3.org/2000/svg"width="24"height="24"viewBox="0 0 24 24"fill="none"stroke="currentcolor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"><pathd="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svgid="sun"xmlns="http://www.w3.org/2000/svg"width="24"height="24"viewBox="0 0 24 24"fill="none"stroke="currentcolor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"><circlecx="12"cy="12"r="5"/><linex1="12"y1="1"x2="12"y2="3"/><linex1="12"y1="21"x2="12"y2="23"/><linex1="4.22"y1="4.22"x2="5.64"y2="5.64"/><linex1="18.36"y1="18.36"x2="19.78"y2="19.78"/><linex1="1"y1="12"x2="3"y2="12"/><linex1="21"y1="12"x2="23"y2="12"/><linex1="4.22"y1="19.78"x2="5.64"y2="18.36"/><linex1="18.36"y1="5.64"x2="19.78"y2="4.22"/></svg></a></span></p><ulclass=menuid=menuonscroll=menu_on_scroll()><li><ahref=https://adityatelange.github.io/hugo-PaperMod/archives/><span>Archives</span></a></li><li><ahref=https://adityatelange.github.io/hugo-PaperMod/tags/><span>Tags</span></a></li></ul></nav></header><mainclass=main><articleclass=post-single><headerclass=post-header><h1class=post-title>Math Typesetting</h1><divclass=post-meta><time>March 8, 2019</time> · 1 min · Hugo Authors</div></header><divclass=post-content><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><prestyle=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><codeclass=language-bashdata-lang=bash><spanstyle=color:#f92672>{{</span><spanstyle=color:#66d9ef>if</span> or .Params.math .Site.Params.math <spanstyle=color:#f92672>}}</span>
</code></pre></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:
<span>Theme️<ahref=https://git.io/hugopapermodrel=noopenertarget=_blank>PaperMod</a></span></footer><ahref=#toparia-label="go to top"title="Go to Top"><buttonclass=top-linkid=top-linktype=button><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 12 6"><pathd="M12 6H0l6-6z"/></svg></button></a>
