Hugo KaTeX Module

March 22, 2023 2 min read Content Modules Docs KaTeX Math

Donate

Become a backer or sponsor to support our work.

On this page

Module	`github.com/hugomods/katex`
Stats

Installation

Import Module

hugo.yaml

1module:
2  imports:
3  - path: github.com/hugomods/katex

hugo.toml

1[module]
2  [[module.imports]]
3    path = 'github.com/hugomods/katex'

hugo.json

1{
2   "module": {
3      "imports": [
4         {
5            "path": "github.com/hugomods/katex"
6         }
7      ]
8   }
9}

Import CSS

Note
Please skip this step if your theme supports HugoPress, such as HB Framework themes.

1{{ partial "katex/assets/css" . }}

Import JS

Note
Please skip this step if your theme supports HugoPress, such as HB Framework themes.

1{{ partial "katex/assets/js" . }}

Usage

Using KaTeX via Code Block

1```katex
2FORMULA HERE
3```

\tag*{(1)} P(E) = {n \choose k} p^k (1-p)^{n-k}

f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi

Using KaTeX via Shortcode

Parameter	Position	Type	Required	Default	Description
`formula`	`#0`	string	-	-	The formula, required when using inline shortcode.
`inline`	`#1`	boolean	-	`false`	Whether display inline.

Inline shortcode

1{{< katex [formula] [inline] />}}

Or use closing shortcode

1{{< katex >}}
2FORMULA HERE
3{{< /katex >}}

KaTeX Shortcode Examples

KaTeX Inline Shortcode Example

1Inline formulas: {{< katex formula="a^n" inline=true />}}, {{< katex "a^2+b^2=c^2" true />}}.

Inline formulas: $$a^n$$ , $$a^2+b^2=c^2$$ .

KaTeX Closing Shortcode Example

1{{< katex >}}
2\begin{array}{l}
3E*{o 1}=\frac{1}{2}\left( { target }*{o 1}- { out }_{o 1}\right)^{2}=\frac{1}{2}(0.01-0.75136507)^{2}=0.274811083 \\
4E_{o 2}=0.023560026 \\
5E*{ {total }}=E*{o 1}+E\_{o 2}=0.274811083+0.023560026=0.298371109
6\end{array}
7{{< /katex >}}

\begin{array}{l} E*{o 1}=\frac{1}{2}\left( { target }*{o 1}- { out }_{o 1}\right)^{2}=\frac{1}{2}(0.01-0.75136507)^{2}=0.274811083 \\ E_{o 2}=0.023560026 \\ E*{ {total }}=E*{o 1}+E\_{o 2}=0.274811083+0.023560026=0.298371109 \end{array}

Mermaid

Browse Docs