KaTeX

The KaTeX integration lets you render math typesetting in markdown documents. The theme supports two ways to write math: the katex shortcode and $$...$$ / $...$ delimiters.

Enabling KaTeX

To use raw $$...$$ or $...$ delimiters in your content, set geekdocMath: true either site-wide in the params config or per-page in the front matter. When enabled, the KaTeX assets are loaded in the page <head>. The katex shortcode does not require this flag, it lazy-loads the assets on first use, so it works on any page out of the box.

Shortcode

Use the shortcode for inline or display math. The content between the opening and closing tags is rendered as a LaTeX expression. By default the expression is rendered inline (flowing with surrounding text using $...$ delimiters). Pass the display flag to render it as display math instead (block-level, centered, on its own line using \[...\] delimiters).

{{< katex display [class="text-center"] >}}
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
{{< /katex >}}

KaTeX can be used inline, for example {{< katex >}}\pi(x){{< /katex >}}, or as display math with the `display` parameter as shown above.

Attributes

class optional list: List of space-separated CSS class names to apply.

Default: none
display optional flag: Render the expression as display math (block-level, centered, on its own line) instead of inline math.

Default: none

Example

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

KaTeX can be used inline, for example $\pi(x)$ , or as display math with the display parameter as shown above.

Delimiters

When math is enabled, expressions wrapped in $$...$$ are auto-rendered as display math (block-level), and expressions wrapped in $...$ are auto-rendered as inline math.

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

KaTeX can be used inline, for example \(\pi(x)\), or as display math with `$$...$$` as shown above.

The theme intentionally uses $...$ for inline math instead of the more common $...$ to avoid collisions with literal dollar signs in prose (for example it costs $5 to $10 would otherwise be interpreted as math). Content inside fenced code blocks and inline code spans is left untouched.

To prevent Goldmark from interpreting the LaTeX source as Markdown, configure the passthrough extension in your Hugo config so the delimited content is forwarded to KaTeX untouched:

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

Example

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

KaTeX can be used inline, for example $\pi(x)$, or as display math with $$...$$ as shown above.