Functional approach

Overview

The leading TeX-to-web conversion libraries often provide functions to output HTML. This is very useful for SSR, and allows us to show mathematical content when paired with the Svelte {@html } tag.

Katex, Temml and Mathlifier

KaTeX is a long-standing library that can be used for this approach.

We have recently started to prefer Temml which outputs MathML so is faster and more lightweight.

For the demo below, we use our own Mathlifier library. The math and display functions used here are wrappers around Temml, with the library providing other functions to handle more advanced use cases.

Demo

Static Math

Inline math (static):

A = π r^{2}

Reactive variables

Inline math (reactive):

\frac{2}{13}

Display math (reactive):

x = \frac{2}{13}

Source code

Installation

For Mathlifier and Temml, include the Temml fonts and css.
For KaTeX use the KaTeX css.

Alternatives

Temml

KaTeX

MathJax

MathJax is another popular library for displaying mathematics on the web. It has slightly more features than our options here, but will take a different approach for use with Svelte. The ~~proof~~ integration is left as an exercise for the reader.