257 lines
6.7 KiB
HTML
257 lines
6.7 KiB
HTML
|
<!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="/lib/icofont/icofont.min.css" />
|
||
|
|
<link rel="stylesheet" href="/css/syntax.css" />
|
||
|
|
<link rel="stylesheet" href="/css/style.css" />
|
||
|
|
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<header class="header-wrapper">
|
||
|
|
<div class="header">
|
||
|
|
<a class="site-title" href="">Flat theme</a>
|
||
|
|
|
||
|
|
<ul class="menu">
|
||
|
|
|
||
|
|
<li class="menu-item">
|
||
|
|
|
||
|
|
<a href="/posts/">Posts</a>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="menu-item">
|
||
|
|
|
||
|
|
<a href="/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="/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="/posts/markdown-syntax/">Markdown Syntax Guide</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="/posts/placeholder-text/">Placeholder Text</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="/posts/math-typesetting/">Math Typesetting</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="/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="/essays/what-is-hugo/">What Is Hugo</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="side-categories">
|
||
|
|
<h2>Categories</h2>
|
||
|
|
<hr />
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="/categories/syntax">syntax(1)</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="/categories/themes">themes(1)</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="side-tags">
|
||
|
|
<h2>Tags</h2>
|
||
|
|
<hr />
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="/tags/css">css (1)</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="/tags/emoji">emoji (1)</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="/tags/html">html (1)</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="/tags/markdown">markdown (2)</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="/tags/text">text (1)</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
<footer class="footer">
|
||
|
|
<div class="footer-row">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<a class="footer-item" href="/posts/index.xml">
|
||
|
|
Feed of Posts
|
||
|
|
<i class="icofont-rss"></i>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<a class="footer-item" href="/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>
|