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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
+++
date = 2021-05-05T15:00:00Z
description = "Sample article showcasing the display of Mathematical Notations, made possible by the KaTeX library."
draft = false
title = "Mathematical Notation"
updated = 2022-01-01T15:00:00Z
[extra]
keywords = "Math, Matematics, Notation, KaTeX, Mathematical Notation"
math = true
math_auto_render = true
series = "Features"
toc = true
[taxonomies]
tags = [
"Features",
"Shortcodes",
"Mathematics",
]
+++
You can use [KaTeX](https://katex.org) to render mathematical notations.
You can enable the $\KaTeX$ support globally, per-section or per-page basis.
<!-- more -->
## Enable Globally
To enable the $\KaTeX$ support globally, add `math = true` under `[extra]` of the `config.toml`
at your site root. Now the katex shortcode will be rendered, you can also add `math_auto_render = true`
and every section and page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html).
```toml
[extra]
math = true
math_auto_render = false
```
## Per-section Basis
To enable the $\KaTeX$ support in a particular section, add `math = true` under `[extra]` in the `[SECTION_NAME]/_index.md`.
Now the katex shortcode will be rendered, you can also add `math_auto_render = true`
and the section of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html).
```toml
+++
[extra]
math = true
+++
```
## Per-page Basis
To enable the $\KaTeX$ support in a particular page, add `math = true` under `[extra]` in the page's
frontmatter. Now the katex shortcode will be rendered, you can also add `math_auto_render = true`
and the page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html).
```toml
+++
[extra]
math = true
math_auto_render = true
+++
```
It is a good practice to enable $\KaTeX$ support on a per-page basis, since this will only load the required files on that particular page, without affecting the page load speed of other pages. If your site is not math-heavy, please do NOT enable this feature globally or per-section basis.
## Usage
Wrap any [valid](https://katex.org/docs/supported.html) $\KaTeX$ syntax with `$...$` for inline Mathematics and `$$...$$` for block Mathematics.
### Inline Mathematics
This is the most beautiful equation I've ever seen:
### Usage
{% raw %}
```rs
{% <katex block={false}> %} e^{i\pi}+1=0 {% </katex> %}
```
{% endraw %}
### Output
```html
{% <katex block={false}> %} e^{i\pi}+1=0 {% </katex> %}
```
{% <katex block={false}> %} e^{i\pi}+1=0 {% </katex> %}
### Block Mathematics
Some Mathematics in display mode is fair enough:
### Usage
{% raw %}
```rs
{% <katex block={true}> %} \int_0^1 x^2 dx {% </katex> %}
```
{% endraw %}
### Output
```html
{% <katex block={true}> %} \int_0^1 x^2 dx {% </katex> %}
```
{% <katex block={true}> %} \int_0^1 x^2 dx {% </katex> %}
### Usage
{% raw %}
```rs
{% <katex block={true}> %} f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi {% </katex> %}
```
{% endraw %}
### Output
```html
{% <katex block={true}> %} f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi {% </katex> %}
```
{% <katex block={true}> %} f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi {% </katex> %}
### Auto Render Inline
```tex
$ e^{i\pi}+1=0 $
```
$ e^{i\pi}+1=0 $
### Auto Render Block
```tex
$$
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
$$
```
$$
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
$$
|
