Math Equations for the Web (KaTeX)

Mohanad Alrwaihy

July 5, 2023

116

KaTeX is an open-source math typesetting library for the web used to render TeX mathematics notations as plain HTML notations.

4 min read

To render and display math formulas on the web we have multiple options to choose from that could lead to displaying math notations in a standard readable and understandable way.

We have three main methods in order to render math equations on the web 👇

Raw HTML - Depend on HTML Symbols & Tags + CSS
Mathematical Markup Language (MathML) - Using HTML5 <math> tag
KaTeX or MathJax (Preferred Option)

In this tutorial, we will focus on using KaTeX to display math notations.

What is KaTeX?

KaTeX is a simple API used to display math notations in major browsers and it's fast and doesn't depend on any dependencies.

Features

Fast: KaTeX renders its math synchronously and doesn’t need to reflow the page.
Print quality: KaTeX’s layout is based on Donald Knuth’s TeX, the gold standard for math typesetting.
Self contained: KaTeX has no dependencies and can easily be bundled with your website resources.
Server side rendering: KaTeX produces the same output regardless of browser or environment, so you can pre-render expressions using Node.js and send them as plain HTML.

Important Terms

Before we learn about KaTeX let's first learn about topics related to KaTeX that can be confusing to understand at first.

TeX

TeX is a digital typesetting system for math expressions designed and written by computer scientist and professor Donald Knuth. It set the standard for writing professional math expressions for publications.

LaTeX

LaTex is a software system for document preparation used widely in academia for the communication and publication of scientific documents. LaTeX is using TeX typesetting program for formatting its output.

KaTeX

KaTeX is a cross-browser JavaScript library used to render and display simple or complex mathematical notations in web browsers. KaTeX allows the use of TeX syntax directly in the HTML file by converting the TeX syntax into MathML and rendering it using CSS to match the TeX typesetting.

KaTeX Example

To display math notation with KaTeX we need to install it first more on that in the next section but let's see what it will look like 👇

CSHTML

<!-- Block -->
<span>The infinite sum $$\sum_{n = 1}^{+\infty} \frac{1}{n^2}$$</span>
<!-- Inline -->
<span>is equal to the real number \( \frac{\pi ^ 2}{6}\)</span>

MathML

Mathematical Markup Language (MathML) is used to describe mathematical notation and capture both its structure and content and is currently part of HTML5 and can be used with the <math> tag.

MathML Example

CSHTML

<p>
  The infinite sum
  <math display="block">
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
      <mfrac>
        <mn>1</mn>
        <msup>
          <mi>n</mi>
          <mn>2</mn>
        </msup>
      </mfrac>
    </mrow>
  </math>
  is equal to the real number
  <math display="inline">
    <mfrac>
      <msup>
        <mi>π</mi>
        <mn>2</mn>
      </msup>
      <mn>6</mn>
    </mfrac></math
  >.
</p>

Unfortunately, MathML is the only way to use math equations using HTML that's why there are several libraries like KaTeX and MathJax that will convert TeX syntax into MathML and render it using the TeX typesetting.

Use KaTeX

To install KaTeX check out the KaTeX Installation documentation for more details.

Browser Install

The easiest way to start with KaTeX is by importing the KaTeX scripts and style. You can check the Browser Installation docs for more options.

Starter template

We can use KaTeX directly on the browser by importing the required scripts and the stylesheet 👇

CSHTML

<!DOCTYPE html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css" integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js" integrity="sha384-cpW21h6RZv/phavutF+AuVYrr+dA8xD9zs6FwLpaCct6O9ctzYFfFr4dgmgccOTx" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
  </head>
  ...
</html>

And now we can use KaTeX inside the body 👇

CSHTML

<body>
	<!-- Block -->
	<span>The infinite sum $$\sum_{n = 1}^{+\infty} \frac{1}{n^2}$$</span>
	<!-- Inline -->
	<span>is equal to the real number \( \frac{\pi ^ 2}{6}\)</span>
</body>

Supported Functions

You can check the KaTeX Supported Functions documentation page for more information about the supported TeX functions supported by KaTeX.

You can also see the supported functions and un-supported functions in the Supported Table sorted alphabetically.

Extension

KaTeX can be used by other libraries like React, Angular, Vue, Rust, and many more you can check the list Here.

I'm going to show another example of how to use KaTeX with React by using the react-katex despondency.

react-katex

Install

POWERSHELL

  $ npm install react-katex
  # or
  $ yarn add react-katex

Usage

To use react-katex we can import the katex styles and the components we could use to typeset math equations 👇

TSX

import 'katex/dist/katex.min.css';
import { InlineMath, BlockMath } from 'react-katex';

Math Inline

The InlineMath component will help display math notation with an inline style 👇

TSX

<InlineMath math='\frac{\pi ^ 2}{6}' />

Math Block

The BlockMath component will help display math notation with a block style 👇

TSX

<BlockMath math='\sum_{n = 1}^{+\infty} \frac{1}{n^2}' />