<!DOCTYPE html>
<html>
<head>
<title>Math Typesetting | Flat theme</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<link rel="stylesheet" href="/hugo-theme-flat/lib/icofont/icofont.min.css" />
<link rel="stylesheet" href="/hugo-theme-flat/css/syntax.css" />
<link rel="stylesheet" href="/hugo-theme-flat/css/style.css" />
<link rel="shortcut icon" href="/hugo-theme-flat/images/favicon.ico" type="image/x-icon" />
</head>
<body>
<header class="header-wrapper">
<div class="header">
<a class="site-title" href="https://leafee98.github.io/hugo-theme-flat/">Flat theme</a>
<ul class="menu">
<li class="menu-item">
<a href="/hugo-theme-flat/posts/">Posts</a>
</li>
<li class="menu-item">
<a href="/hugo-theme-flat/essays/">Essays</a>
</li>
<li class="menu-item">
<a>Services↓</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Service A</a></li>
<li class="menu-item"><a href="#">Service B</a></li>
</ul>
</li>
<li class="menu-item">
<a href="/hugo-theme-flat/about/">About</a>
</li>
</ul>
</div>
</header>
<main class="main-wrapper">
<div class="main">
<section class="single">
<h1 class="title">Math Typesetting</h1>
<div class="tip">
<time datetime="2019-03-08 00:00:00 +0000 UTC">2019/03/08</time>
<span class="split">·</span>
<span> 115 words </span>
<span class="split">·</span>
<span>
1 minutes to read
</span>
</div>
<div class="taxonomies">
</div>
<hr />
<div class="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 <a href="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 <a href="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>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="o">{{</span> <span class="k">if</span> or .Params.math .Site.Params.math <span class="o">}}</span>
</span></span><span class="line"><span class="cl"><span class="o">{{</span> partial <span class="s2">"math.html"</span> . <span class="o">}}</span>
</span></span><span class="line"><span class="cl"><span class="o">{{</span> end <span class="o">}}</span>
</span></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 <a href="https://katex.org/docs/supported.html">Supported TeX Functions</a></p>
<h3 id="examples">Examples <a href="#examples" class="anchor">🔗</a></h3>
<p>Block math:
$$
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
$$</p>
</div>
</section>
</div>
<div class="side">
<div class="side-recent">
<h2 class="side-title">Recent Posts</h2>
<hr />
<ul>
<li>
<a href="/hugo-theme-flat/posts/markdown-syntax/">Markdown Syntax Guide</a>
</li>
<li>
<a href="/hugo-theme-flat/posts/placeholder-text/">Placeholder Text</a>
</li>
<li>
<a href="/hugo-theme-flat/posts/math-typesetting/">Math Typesetting</a>
</li>
<li>
<a href="/hugo-theme-flat/posts/emoji-support/">Emoji Support</a>
</li>
</ul>
</div>
<div class="side-recent">
<h2 class="side-title">Recent Essays</h2>
<hr />
<ul>
<li>
<a href="/hugo-theme-flat/essays/what-is-hugo/">What Is Hugo</a>
</li>
</ul>
</div>
<div class="side-categories">
<h2>Categories</h2>
<hr />
<ul>
<li>
<a href="/hugo-theme-flat/categories/syntax">syntax(1)</a>
</li>
<li>
<a href="/hugo-theme-flat/categories/themes">themes(1)</a>
</li>
</ul>
</div>
<div class="side-tags">
<h2>Tags</h2>
<hr />
<ul>
<li>
<a href="/hugo-theme-flat/tags/css">css (1)</a>
</li>
<li>
<a href="/hugo-theme-flat/tags/emoji">emoji (1)</a>
</li>
<li>
<a href="/hugo-theme-flat/tags/html">html (1)</a>
</li>
<li>
<a href="/hugo-theme-flat/tags/markdown">markdown (2)</a>
</li>
<li>
<a href="/hugo-theme-flat/tags/text">text (1)</a>
</li>
</ul>
</div>
</div>
</main>
<footer class="footer">
<div class="footer-row">
<a class="footer-item" href="https://leafee98.github.io/hugo-theme-flat/posts/index.xml">
Feed of Posts
<i class="icofont-rss"></i>
</a>
<a class="footer-item" href="https://leafee98.github.io/hugo-theme-flat/essays/index.xml">
Feed of Essays
<i class="icofont-rss"></i>
</a>
</div>
<div class="footer-row">
<span class="footer-item">Copyright <a href="https://creativecommons.org/licenses/by/4.0/">CC BY-4.0</a></span>
</div>
<div class="footer-row">
<span class="footer-item">Powered by <a href="https://gohugo.io">Hugo</a></span>
<span class="footer-item">Theme <a href="https://cgit.leafee98.com/hugo-theme-flat.git">hugo-theme-flat</a></span>
</div>
</footer>
</body>
</html>