Hugo Story Theme
Archives Slides Talks

Story’s Mathematical Equation Typesetting

Published Aug 20, 2018 by Baron SCHWARTZ in Demo at https://story-customized.tchinchow.net/math/

This article is a demo of Story’s ability to typeset mathematical equations, both inline and in block form.

Story uses the KaTeX library to typeset mathematical formulae in \( \LaTeX \) notation. KaTeX is similar to MathJax, but simpler and faster. It provides most of the features needed for typesetting equations, both inline and in block form.

Before you begin, make sure you enable the math feature by adding the following class to your article’s front matter:

---
classes:
- feature-math
---

Then you can start using Story’s math Hugo shortcode to help avoid problems that result from Markdown processing. Here’s an example of using the shortcode for inline math:

The quadratic equation is {{< math >}}x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}{{< /math >}}.

The quadratic equation is \( x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \).

And in equation mode,

{{< math >}}
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
{{< /math >}}
\[x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \]

You don’t have to use the shortcode, but it saves you from needing to backslash-escape special characters, and fixes problems like backslashes and spaces at the end of the line, which Hugo’s Markdown processor will otherwise mangle. This enables frustration-free typesetting of more advanced equations such as the following:

\[\left\{ \begin{array}{c} a_1x+b_1y+c_1z=d_1 \\ a_2x+b_2y+c_2z=d_2 \\ a_3x+b_3y+c_3z=d_3 \end{array} \right. \]

Math typesetting is controlled with the feature-[no]math flag.

Read next: Diagrams and Visualizations with Mermaid.js.

Baron Schwartz

Baron Schwartz is the creator of Hugo’s Story theme.

Find out more about Baron on his web site.

Story logo

© 2025 Baron Schwartz / Lionel VICTOR