<!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 &#43;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">&#34;math.html&#34;</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&rsquo;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>