155 lines
4.4 KiB
HTML
155 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
||
<html><head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="your description">
|
||
<meta name="Author" content="your name">
|
||
<meta name="keywords" content="hugo blog">
|
||
<link rel="stylesheet" href=https://example.com/css/syntax.css>
|
||
<link rel="stylesheet" href=https://example.com/css/style.css>
|
||
<script src="https://kit.fontawesome.com/1b7478c139.js" crossorigin="anonymous"></script>
|
||
<title>title</title>
|
||
</head><body><aside id="sidenav">
|
||
<header>
|
||
|
||
<a href="https://example.com"><img src="/avatar.png" alt="avatar"></a>
|
||
|
||
|
||
<a id="branding" href="https://example.com">
|
||
|
||
title
|
||
|
||
</a>
|
||
</header>
|
||
|
||
<nav>
|
||
|
||
|
||
<a href="/"
|
||
|
||
>
|
||
<i class="fas fa-home fa-sm"></i>
|
||
<span>home</span>
|
||
</a>
|
||
|
||
|
||
<a href="/blog/"
|
||
|
||
>
|
||
<i class="fas fa-keyboard fa-ms"></i>
|
||
<span>blog</span>
|
||
</a>
|
||
|
||
|
||
<a href="/tags"
|
||
|
||
>
|
||
<i class="fas fa-tags fa-ms"></i>
|
||
<span>tags</span>
|
||
</a>
|
||
|
||
|
||
<a href="https://github.com/yourgithubusername23434"
|
||
|
||
target="_blanck"
|
||
|
||
>
|
||
<i class="fab fa-github fa-ms"></i>
|
||
<span>github</span>
|
||
</a>
|
||
|
||
|
||
<a href="/index.xml"
|
||
|
||
>
|
||
<i class="fas fa-rss fa-ms"></i>
|
||
<span>RSS</span>
|
||
</a>
|
||
|
||
|
||
<a href="/contact"
|
||
|
||
>
|
||
<i class="far fa-envelope"></i>
|
||
<span>contact</span>
|
||
</a>
|
||
|
||
</aside>
|
||
<main id="main">
|
||
<a href="javascript:void(0)" id="closebtn" onclick="navToggle()"><i class="fas fa-bars fa-lg"></i></a>
|
||
<div class="content">
|
||
|
||
<h1 id="title">Math Typesetting</h1>
|
||
|
||
|
||
|
||
<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:<br></li>
|
||
</ul>
|
||
|
||
<pre><code>{{ if or .Params.math .Site.Params.math }}
|
||
{{ partial "math.html" . }}
|
||
{{ end }}
|
||
</code></pre>
|
||
|
||
<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</h3>
|
||
|
||
<p>Inline math: <span class="math">\( \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… \)</span></p>
|
||
|
||
<p>Block math:</p>
|
||
|
||
<p><span class="math">\[
|
||
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
|
||
\]</span></p>
|
||
|
||
<div class="nav-next-prev">
|
||
<div class="nav-prev">
|
||
|
||
<a href="https://example.com/blog/emoji-support/"><i class="fas fa-chevron-left"></i></a>
|
||
|
||
</div>
|
||
<a class="nav-top" href="#">top</i></a>
|
||
<div class="nav-next">
|
||
|
||
<a href="https://example.com/blog/placeholder-text/"><i class="fas fa-chevron-right"></i></a>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div><footer>
|
||
<div class="footer-content">
|
||
<div class="contact-info">
|
||
|
||
<div class="footer-mail">
|
||
<i class="far fa-envelope"></i> <a href="mailto:mail@example.com">mail@example.com</a> </div>
|
||
|
||
|
||
<div class="footer-phone">
|
||
<i class="fas fa-phone"></i> 8888888888
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<p class="copyright meta">Copyright © 2008–2019, Steve Francia and the Hugo Authors; all rights reserved.</p>
|
||
|
||
</div>
|
||
</footer></main>
|
||
</body>
|
||
<script src=https://example.com/js/navbutton.js></script>
|
||
</html>
|