marcel
/
congo
mirror of https://github.com/jpanther/congo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
congo/blog/math-typesetting/index.html

123 lines
5.6 KiB
HTML
Raw Blame History

<!doctype html><html lang=en-au><head>
<meta charset=utf-8>
<meta http-equiv=content-language content="en-AU">
<meta name=viewport content="width=device-width,initial-scale=1">
<meta http-equiv=x-ua-compatible content="ie=edge">
<title>Math Typesetting &#183; Congo</title>
<meta name=title content="Math Typesetting &#183; Congo">
<meta name=description content="A brief guide to setup KaTeX">
<base href=https://jpanther.github.io/Congo/>
<link rel=canonical href=https://jpanther.github.io/Congo/blog/math-typesetting/>
<link type=text/css rel=stylesheet href=https://jpanther.github.io/Congo/css/main.css>
<link rel=apple-touch-icon sizes=180x180 href=https://jpanther.github.io/apple-touch-icon.png>
<link rel=icon type=image/png sizes=32x32 href=https://jpanther.github.io/favicon-32x32.png>
<link rel=icon type=image/png sizes=16x16 href=https://jpanther.github.io/favicon-16x16.png>
<link rel=manifest href=https://jpanther.github.io/site.webmanifest>
<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="https://jpanther.github.io/Congo/blog/math-typesetting/"><meta property="article:section" content="blog">
<meta property="article:published_time" content="2019-03-08T00:00:00+00:00">
<meta property="article:modified_time" content="2019-03-08T00:00:00+00: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=generator content="Hugo 0.87.0">
<meta name=author content="Freddy Blogger">
<link href=https://twitter.com/ rel=me>
<link href=https://github.com/ rel=me>
<link href=https://linkedin.com/ rel=me>
</head>
<body class="flex flex-col h-screen px-8 text-lg leading-7 text-grey-900 sm:px-14 md:px-24 lg:px-32 dark:bg-gray-800 dark:text-white"><header class="flex justify-between py-10 font-semibold">
<div>
<a class=hover:underline rel=me href=https://jpanther.github.io/Congo/>Congo</a>
</div>
<nav>
<ul class="flex list-none">
<li class="mr-7 last:mr-0">
<a class=hover:underline href=/Congo/blog/ title=Blog>Blog</a>
</li>
<li class="mr-7 last:mr-0">
<a class=hover:underline href=/Congo/about/ title=About>About</a>
</li>
<li class="mr-7 last:mr-0">
<a class=hover:underline href=tags title>Tags</a>
</li>
</ul>
</nav>
</header>
<main class=flex-grow>
<article class=max-w-prose>
<header>
<h1 class="mt-0 text-4xl font-extrabold">Math Typesetting</h1>
<div class="mt-8 mb-12 text-base text-gray-400 dark:text-gray-500">
<time datetime="2019-03-08 00:00:00 +0000 UTC">8 March 2019</time>
<span class=px-1>&#183;</span>
<span title="Reading time">
1
min
</span>
</div>
</header>
<section class="prose dark:prose-light">
<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 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-bash data-lang=bash><span style=color:#f92672>{{</span> <span style=color:#66d9ef>if</span> or .Params.math .Site.Params.math <span style=color:#f92672>}}</span>
<span style=color:#f92672>{{</span> partial <span style=color:#e6db74>&#34;math.html&#34;</span> . <span style=color:#f92672>}}</span>
<span style=color:#f92672>{{</span> end <span style=color:#f92672>}}</span>
</code></pre></div><ul>
<li>To enable KaTex globally set the parameter <code>math</code> to <code>true</code> in a project&rsquo;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&nbsp;<a class=heading-anchor href=#examples aria-label=Anchor>#</a> </h3>
<p>Block math:</p>
<p>$$
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
$$</p>
</section>
<footer>
<div class="flex items-center pt-8">
<img class="w-24 h-24 !mt-0 !mb-0 mr-4 rounded-full" src="https://i.pravatar.cc/150?img=11">
<div>
<div class="font-semibold leading-6 text-gray-800 dark:text-gray-300">
Freddy Blogger
</div>
<div class="flex text-lg text-gray-400 dark:text-gray-500">
<a class="mr-2 hover:text-primary-700 dark:hover:text-primary-400" href=https://twitter.com/ target=_blank title=Twitter><span class="relative inline-block align-text-bottom icon">
icons/twitter-brands.svg
</span>
</a>
<a class="mr-2 hover:text-primary-700 dark:hover:text-primary-400" href=https://github.com/ target=_blank title=GitHub><span class="relative inline-block align-text-bottom icon">
icons/github-brands.svg
</span>
</a>
<a class="mr-2 hover:text-primary-700 dark:hover:text-primary-400" href=https://linkedin.com/ target=_blank title=Linkedin><span class="relative inline-block align-text-bottom icon">
icons/linkedin-brands.svg
</span>
</a>
</div>
</div>
</div>
</footer>
</article>
</main><footer class="py-10 text-sm">
<p class="text-gray-400 dark:text-gray-500">
&copy;
2021
Freddy Blogger
</p>
<p class="text-xs text-gray-300 dark:text-gray-600">
Powered by
<a class=hover:underline href=https://gohugo.io/ target=_blank>Hugo</a>
&
<a class=hover:underline href=https://git.io/hugo-congo target=_blank>Congo</a>
</p>
</footer>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink