2021-10-28 18:20:19 +02:00
<!doctype html> < html lang = en > < head > < meta charset = utf-8 > < meta name = viewport content = "width=device-width,initial-scale=1" > < meta property = "og:title" content = "Math Typesetting" > < meta property = "og:description" content = "A brief guide to setup KaTeX" > < meta property = "og:type" content = "article" > < meta property = "og:url" content = "http://h.xjj.pub/math-typesetting/" > < meta property = "article:section" content > < meta property = "article:published_time" content = "2021-07-18T10:52:59+08:00" > < meta property = "article:modified_time" content = "2021-07-18T10:52:59+08:00" > < meta name = twitter:card content = "summary" > < meta name = twitter:title content = "Math Typesetting" > < meta name = twitter:description content = "A brief guide to setup KaTeX" > < meta name = theme-color media = "(prefers-color-scheme: light)" content = "#ffffff" > < meta name = theme-color media = "(prefers-color-scheme: dark)" content = "#262d33" > < title > Hi Folks - Math Typesetting< / title > < link rel = "shortcut icon" href = /favicon.ico type = image/x-icon > < link rel = preconnect href = https://fonts.googleapis.com > < link rel = preconnect href = https://fonts.gstatic.com crossorigin > < link href = "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap" rel = stylesheet > < link rel = stylesheet href = /minima.1635438019.css > < script defer type = text/javascript src = /minima.1635438019.js > < / script > < / head > < script > try { 'theme' in localStorage || ( localStorage . theme = window . matchMedia ( '(prefer-color-scheme: dark)' ) . matches ? 'dark' : 'light' ) , document . querySelector ( 'html' ) . classList . add ( localStorage . theme ) } catch ( a ) { console . error ( a ) } < / script > < body class = "sm:mx-5 sm:my-0" > < header class = "flex justify-between items-center sm:my-3" > < div class = "flex items-center" > < div id = theme-switcher class = "text-4xl cursor-pointer" > 🌝< / div > < / div > < nav class = "flex items-center
2021-09-11 06:07:36 +02:00
whitespace-nowrap overflow-x-auto overflow-y-hidden">< a class = ml-5 href = / > Home< / a >
< a class = ml-5 href = /categories > Categories< / a >
< a class = ml-5 href = /series > Series< / a >
< a class = ml-5 href = /about > About< / a > < / nav > < / header > < h1 class = "mt-8 mb-6" > Math Typesetting< / h1 > < div class = "mb-3 text-xs flex justify-between sm:flex-col" > < div > Posted at — Jul 18, 2021< / div > < / div > < main > < p > A brief guide to setup KaTeX< / p > < article class = md > < 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 > < div class = chroma > < table class = lntable > < tr > < td class = lntd > < pre class = chroma > < code > < span class = lnt > 1
2021-08-23 16:21:24 +02:00
< / span > < span class = lnt > 2
< / span > < span class = lnt > 3
< / span > < / code > < / pre > < / td > < td class = lntd > < pre class = chroma > < code class = language-bash data-lang = bash > < span class = o > {{< / span > < span class = k > if< / span > or .Params.math .Site.Params.math < span class = o > }}< / span >
< span class = o > {{< / span > partial < span class = s2 > " math.html" < / span > . < span class = o > }}< / span >
< span class = o > {{< / span > end < span class = o > }}< / span >
< / code > < / pre > < / td > < / tr > < / table > < / div > < / 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< / h3 > < p > Block math:
$$
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
2021-09-09 09:57:26 +02:00
$$< / p > < / article > < / main > < link rel = stylesheet href = https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css integrity = sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc crossorigin = anonymous > < script defer src = https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js integrity = sha384-YNHdsYkH6gMx9y3mRkmcJ2mFUjTd0qNQQvY9VYZgQd7DcN7env35GzlmFaZ23JGp crossorigin = anonymous > < / script > < script defer src = https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/contrib/auto-render.min.js integrity = sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl crossorigin = anonymous > < / script > < script > document . addEventListener ( "DOMContentLoaded" , function ( ) { renderMathInElement ( document . body , { delimiters : [ { left : '$$' , right : '$$' , display : ! 0 } , { left : '$' , right : '$' , display : ! 1 } , { left : '\\(' , right : '\\)' , display : ! 1 } , { left : '\\[' , right : '\\]' , display : ! 0 } ] , throwOnError : ! 1 } ) } ) < / script > < footer class = "mt-8 flex sm:flex-col-reverse justify-between items-center" > < p class = "mt-0 text-sm" > © Copyright notice |
2021-09-11 06:07:36 +02:00
< a href = https://gohugo.io target = _blank rel = "noopener noreferrer" > Hugo< / a > on
< a href = https://github.com/mivinci/hugo-theme-minima target = _blank rel = "noopener noreferrer" > Minima< / a > < / p > < p class = "flex items-center mt-0" > < a class = "icon mx-2" href = https://github.com/mivinci title = github > < svg fill = "#63636f" width = "18" role = "img" viewBox = "0 0 24 24" xmlns = "http://www.w3.org/2000/svg" > < title > GitHub< / title > < path d = "M12 .297c-6.63.0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577.0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93.0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176.0.0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22.0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22.0 1.606-.015 2.896-.015 3.286.0.315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" / > < / svg > < / a > < a class = "icon mx-2" href = https://linkedin/in/leonard-mivinci-63895317a title = linkedin > < svg fill = "#0073b1" width = "18" role = "img" viewBox = "0 0 24 24" xmlns = "http://www.w3.org/2000/svg" > < title > LinkedIn< / title > < path d = "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853.0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601.0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144.0-2.063-.926-2.063-2.065.0-1.138.92-2.063 2.063-2.063 1.14.0 2.064.925 2.064 2.063.0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225.0H1.771C.792.0.0.774.0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2.0 22.222.0h.003z" / > < / svg > < / a > < a class = "icon mx-2" href = https://twitter.com/Leonard14733745 title = twitter > < svg fill = "#1da1f2" width = "18" role = "img" viewBox = "0 0 24 24" xmlns = "http://www.w3.org/2000/svg" > < title > Twitter< / title > < path d = "M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717.0-4.92 2.203-4.92 4.917.0.39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475.0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314.0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39.0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054.0 13.999-7.496 13.999-13.986.0-.209.0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z" / > < / svg > < / a > < a class = "icon mx-2" href = /index.xml title = rss > < svg fill = "#63636f" t = "1626591563876" viewBox = "0 0 1024 1024" xmlns = "http://www.w3.org/2000/svg" p-id = "1984" width = "18" height = "16" > < path d = "M128 768a128 128 0 100 256 128 128 0 000-256zM0 368v176c265.104.0 480 214.912 480 480h176c0-362.32-293.696-656-656-656zM0 0v176c468.336.0 848 379.664 848 848h176C1024 458.464 565.536.0.0.0z" p-id = "1985" / > < / svg > < / a > < / p > < / footer > < / body > < / html >
