diff options
Diffstat (limited to 'post/math-typesetting/index.html')
| -rw-r--r-- | post/math-typesetting/index.html | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/post/math-typesetting/index.html b/post/math-typesetting/index.html new file mode 100644 index 0000000..962c633 --- /dev/null +++ b/post/math-typesetting/index.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<meta name="description" content="A brief guide to setup KaTeX"> +<meta name="author" content="Hugo Authors"> +<meta name="generator" content="Hugo 0.54.0" /> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<link rel="stylesheet" href="/hugo-base16-theme/css/style.css" type="text/css"> +<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700" type="text/css"> +<link rel="alternate" href="/hugo-base16-theme/index.xml" type="application/rss+xml" title="Hugo Base16 Theme"> +<title>Math Typesetting - Hugo Base16 Theme</title> +</head> +<body> + +<header> + <div class="container clearfix"> + <a class="path" href="https://htdvisser.github.io/hugo-base16-theme/">[Hugo Base16 Theme]</a> + <span class="caret"># _</span> + <div class="right"> + + </div> + </div> +</header> + +<div class="container"> + + +<main role="main" class="article"> + +<article class="single" itemscope itemtype="http://schema.org/BlogPosting"> + <div class="meta"> + + <span class="key">published on</span> + <span class="val"><time itemprop="datePublished" datetime="2019-03-08">March 08, 2019</time></span> + + + + </div> + <h1 class="headline" itemprop="headline">Math Typesetting</h1> + <section class="body" itemprop="articleBody"> + <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> + + +<!-- KaTeX --> +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous"> +<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script> +<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script> + +</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> + </section> +</article> + +</main> + +</div> + +<footer> + <div class="container"> + <span class="copyright">© 2019 Hugo Base16 Theme - <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a></span> + </div> +</footer> + +</body> +</html> + |