2022-09-04 10:53:45 +00:00
<!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" >
2022-09-04 11:03:28 +00:00
< a class = "site-title" href = "https://leafee98.github.io/hugo-theme-flat/" > Flat theme< / a >
2022-09-04 10:53:45 +00:00
< ul class = "menu" >
< li class = "menu-item" >
2022-09-04 11:03:28 +00:00
< a href = "/hugo-theme-flat/posts/" > Posts< / a >
2022-09-04 10:53:45 +00:00
< / li >
< li class = "menu-item" >
2022-09-04 11:03:28 +00:00
< a href = "/hugo-theme-flat/essays/" > Essays< / a >
2022-09-04 10:53:45 +00:00
< / 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" >
2022-09-04 11:03:28 +00:00
< a href = "/hugo-theme-flat/about/" > About< / a >
2022-09-04 10:53:45 +00:00
< / 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 >
2022-09-04 11:03:28 +00:00
< a href = "/hugo-theme-flat/posts/markdown-syntax/" > Markdown Syntax Guide< / a >
2022-09-04 10:53:45 +00:00
< / li >
< li >
2022-09-04 11:03:28 +00:00
< a href = "/hugo-theme-flat/posts/placeholder-text/" > Placeholder Text< / a >
2022-09-04 10:53:45 +00:00
< / li >
< li >
2022-09-04 11:03:28 +00:00
< a href = "/hugo-theme-flat/posts/math-typesetting/" > Math Typesetting< / a >
2022-09-04 10:53:45 +00:00
< / li >
< li >
2022-09-04 11:03:28 +00:00
< a href = "/hugo-theme-flat/posts/emoji-support/" > Emoji Support< / a >
2022-09-04 10:53:45 +00:00
< / li >
< / ul >
< / div >
< div class = "side-recent" >
< h2 class = "side-title" > Recent Essays< / h2 >
< hr / >
< ul >
< li >
2022-09-04 11:03:28 +00:00
< a href = "/hugo-theme-flat/essays/what-is-hugo/" > What Is Hugo< / a >
2022-09-04 10:53:45 +00:00
< / 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" >
2022-09-04 11:03:28 +00:00
< a class = "footer-item" href = "https://leafee98.github.io/hugo-theme-flat/posts/index.xml" >
2022-09-04 10:53:45 +00:00
Feed of Posts
< i class = "icofont-rss" > < / i >
< / a >
2022-09-04 11:03:28 +00:00
< a class = "footer-item" href = "https://leafee98.github.io/hugo-theme-flat/essays/index.xml" >
2022-09-04 10:53:45 +00:00
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 >
