Hugo Blogging - KaTeX Configuration

This post is one of several in the “Hugo Blogging” series. If you haven’t, read the introduction to get started.

Instructions

  1. Create a partial template file at layouts/partials/math.html.
    • Add a reference to KaTeX Auto-render Extension (see the example here).

    • Add support for inline $ \KaTeX $ expressions by appending the following:

<script>
	document.addEventListener("DOMContentLoaded", function () {
		renderMathInElement(document.body, {
			delimiters: [
				{ left: "$$", right: "$$", display: true },
				{ left: "$", right: "$", display: false }
			]
		});
	});
</script>
  1. Create a partial template file at layouts/partials/header.html.
    • Add a (conditional) reference to math.html.

    • This ensures that $ \KaTeX $ is only served if the page requires it.

{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}

Usage

  1. If a page requires $ \KaTeX $ expressions, add math: true to the front matter.

  2. Wrap the expression with either $ (inline) or $$ (display style).


Inline Example

Solve for $ x $ in the following $ 25 = x ^ 2 $.

Solve for $ x $ in the following $ 25 = x ^ 2 $.


Display Example

$$
y = x ^ 2
$$

$$ y = x ^ 2 $$

References


201 Words

2021-02-13 02:54 +0000