KaTeX

Render math typesetting with KaTeX.

Activation

KaTeX styles are included on the page by the first use of the shortcode or a katex code block. In order to use delimiters passthrough needs to be configured.

Block Rendering

Three equivalent ways to render display math:

Shortcode

{{< katex displayMode=true >}}
f(x) = \int_{-\infty}^\infty
\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
{{< /katex >}}

Code block

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

Dollar delimiters

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

Result:

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

Inline Rendering

Syntax	Output
`{{< katex >}}\pi(x){{< /katex >}}`	$\pi(x)$
`\$ \pi(x) \$`	$\pi(x)$

Parameters

Shortcode and block parameters are the same as original from transform.ToMath. See Hugo documentation

Passthrough

Hugo offers a hook to render math as passthrough, without codeblocks or shortcodes. See configuration in Hugo documentation.

hugo.yaml

markup:
  goldmark:
    extensions:
      passthrough:
        enable: true
        delimiters:
          block:
          - ['\[', '\]']
          - ['$$', '$$']
          inline:
          - ['\(', '\)']

layouts/_markup/render-passthrough.html

{{/*- $opts := dict "displayMode" (eq .Type "block") -*/}}
{{/*- (transform.ToMath .Inner $opts) -*/}}

Syntax	Output
`{{< katex >}}\pi(x){{< /katex >}}`	$\pi(x)$
`\\( \pi(x) \\)`	$\pi(x)$