📝 Add mathematical notation docs

pull/26/head
James Panther 2021-11-04 10:08:59 +11:00
parent 554ae35e6f
commit 67aa482ff6
No known key found for this signature in database
GPG Key ID: D36F789E45745D17
3 changed files with 66 additions and 47 deletions

View File

@ -111,6 +111,26 @@ Icons are populated using Hugo pipelines which makes them very flexible. Congo s
Icons can also be used in partials by calling the [icon partial]({{< ref "partials#icon" >}}).
## Katex
The `katex` shortcode can be used to add mathematical expressions to article content using the KaTeX package. Refer to the online reference of [supported TeX functions](https://katex.org/docs/supported.html) for the available syntax.
To include mathematical expressions in an article, simply place the shortcode anywhere with the content. It only needs to be included once per article and KaTeX will automatically render any markup on that page. Both inline and block notation are supported.
Inline notation can be generated by wrapping the expression in `\\(` and `\\)` delimiters. Alternatively, block notation can be generated using `$$` delimiters.
**Example:**
```md
{{</* katex */>}}
\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
```
{{< katex >}}
\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
Check out the [mathematical notation samples]({{< ref "mathematical-notation" >}}) page for more examples.
## Lead
`lead` is used to bring emphasis to the start of an article. It can be used to style an introduction, or to call out an important piece of information. Simply wrap any Markdown content in the `lead` shortcode.

View File

@ -1,47 +0,0 @@
---
author: Hugo Authors
title: Math Typesetting
date: 2019-03-08
description: A brief guide to setup KaTeX
math: true
tags: ["sample"]
---
Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.
<!--more-->
In this example we will be using [KaTeX](https://katex.org/).
- Create a partial under `/layouts/partials/math.html`
- Within this partial reference the [Auto-render Extension](https://katex.org/docs/autorender.html) or host these scripts locally.
- Include the partial in your templates like so:
```bash
{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}
```
- To enable KaTex globally set the parameter `math` to `true` in a project's configuration
- To enable KaTex on a per page basis include the parameter `math: true` in content files
**Note:** Use the online reference of [Supported TeX Functions](https://katex.org/docs/supported.html)
<!-- KaTeX -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.css" integrity="sha384-RZU/ijkSsFbcmivfdRBQDtwuwVqK7GMOw6IMvKyeWL2K5UAlyp6WonmB8m7Jd0Hn" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.js" integrity="sha384-pK1WpvzWVBQiP0/GjnvRxV4mOb0oxFuyRxJlk6vVw146n3egcN5C925NCP7a7BY8" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>
### Examples
<p>
Inline math: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\)
</p>
Block math:
$$
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
$$

View File

@ -0,0 +1,46 @@
---
title: Mathematical notation
date: 2019-03-08
description: A brief sample of mathematical notation in Congo.
tags: ["sample", "katex", "maths"]
---
KaTeX can be used to render mathematical notation within articles.
<!--more-->
{{< katex >}}
Congo will only bundle the KaTeX assets into your project if you make use of mathematical notation. In order for this to work, simply include the [`katex` shortcode]({{< ref "docs/shortcodes#katex" >}}) within the article. Any KaTeX syntax on that page will then be automatically rendered.
Use the online reference of [supported TeX functions](https://katex.org/docs/supported.html) for the available syntax.
## Inline notation
Inline notation can be generated by wrapping the expression in `\\(` and `\\)` delimiters.
**Example:**
```tex
% KaTeX inline notation
Inline notation: \\(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\\)
```
Inline notation: \\(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\\)
## Block notation
Alternatively, block notation can be generated using `$$` delimiters. This will output the expression in its own HTML block.
**Example:**
```tex
% KaTeX block notation
$$
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
$$
```
$$
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
$$