Rendering mathematical expressions into HTML using Katex

Edoardo 🇮🇹 May 31, 2021 1 min read
Table of Contents

Introduction #

This is a sample post intended to test the integration of Katex within Hugo in order to convert complex mathematical expressions from Markdown into visually appealing HTML, a useful feature for static websites.

Demo #

Expressions in TeX format are inserted in markdown using code blocks surrounded by $$.

For example, the following:

$$Gamma = \frac{1}{\lambda_t} \cdot \sum_{i=1}^L \frac{I_i}{C_i - I_i} + \gamma \cdot \sum_{i=1}^{L}d_i \cdot C_i$$

is then rendered in HTML as:

$$\Gamma = \frac{1}{\lambda_t} \cdot \sum_{i=1}^L \frac{I_i}{C_i - I_i} + \gamma \cdot \sum_{i=1}^{L}d_i \cdot C_i$$

Which not only looks great, it also has semantic annotations and respects dark mode!

This implementation uses auto-render extension under the hook to automatically render all the math in place.

Inline equations are also supported: $c = \pm\sqrt{a^2 + b^2}$

More #

Katex also offers a CLI tool that can output raw HTML. Note that you will need to add Katex CSS and fonts to display the expression properly.

Refer to the official documentation for more details!