post/math-typesetting/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
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 &quot;math.html&quot; . }}
{{ 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">&copy; 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>