Math in Markup with LaTeX

A few notes on how to encode equations in markdown

August 1, 2024

It's nice to be able to render a math equation in a way similar to how your math teacher wrote it on the blackboard. Fortunately there are several options for how to do this in Markdown and HTML:

MathML

This is an XML markup supported by browsers natively. Unfortunately, it's XML and therefore verbose and not that easy to read. Quick example:

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <msup>
    <mi>x</mi>
    <mn>2</mn>
  </msup>
</math>

Unicode

We can just type math directly in the markdown. This is definitely an option for short expressions, but the available symbols and layout is very limited:

√2 ≈ 1.414
∑_{i=1}^{n} i = n(n+1)/2

HTML and CSS

There are some native tags in HTML and styling in CSS that can give us quite of lot of expressiveness. The downside is readability and verboseness.

<div>
    <span style="font-style:italic;">
        x</span><sup>2</sup>
        + y<sup>2</sup>
        = z<sup>2</sup>
    </span>
</div>

External Image or SVG

We could admit defeat and generate the expression externally and just pull the image into the markdown. The downside here is that we need to involve other tooling, and the markdown will lose readability.

LaTeX in Markdown

LaTeX is the most common approach to render math equations in Markdown. This also appears to be the standard output by most LLMs.

Pythagoras - $x^2 + y^2 = z^2$

Pythagoras - $x^2 + y^2 = z^2$

LaTeX stands for "Lamport TeX", named after Leslie Lamport who developed an extension to the TeX typesetting system in the 1980s. LaTeX is sometimes referred to as MathJax as this is a common rendering library for the browser that converts the codes into rendered SVG and HTML. KaTeX is yet another name used commonly, this is a more modern library for LaTeX and used by ChatGPT.

Capabilities

Here are the key symbols offered by LaTeX in Markdown via the KaTeX:

Basic Formatting

Syntax	Description	Example	Rendered Output
`x^2`	Superscript (Exponent)	$x^2$	$x^2$
`x_2`	Subscript	$x_2$	$x_2$
`\frac{a}{b}`	Fraction	$\frac{a}{b}$	$\frac{a}{b}$
`\sqrt{x}`	Square root	$\sqrt{x}$	$\sqrt{x}$
`\nthroot{n}{x}`	N-th root	$\sqrt[3]{x}$	$\sqrt[3]{x}$
`\text{word}`	Plain text inside math	$\text{speed} = \frac{d}{t}$	$\text{speed} = \frac{d}{t}$

Greek Letters

Symbol	Syntax	Rendered Output
Alpha	`\alpha`	$\alpha$
Beta	`\beta`	$\beta$
Gamma	`\gamma`	$\gamma$
Delta	`\delta`	$\delta$
Theta	`\theta`	$\theta$
Lambda	`\lambda`	$\lambda$
Pi	`\pi`	$\pi$
Sigma	`\sigma`	$\sigma$
Phi	`\phi`	$\phi$
Omega	`\omega`	$\omega$

Operators and Relations

Symbol	Syntax	Rendered Output
Equals	`=`	$=$
Not Equal	`\neq`	$\neq$
Approx.	`\approx`	$\approx$
Less Than	`<`	$<$
Greater Than	`>`	$>$
Less/Equal	`\leq`	$\leq$
Greater/Equal	`\geq`	$\geq$
Plus/Minus	`\pm`	$\pm$
Infinity	`\infty`	$\infty$

Summation, Integrals, and Limits

Symbol	Syntax	Rendered Output
Sum	`\sum_{i=1}^{n} i`	$\sum\_{i=1}^{n} i$
Integral	`\int_{a}^{b} x \,dx`	$\int\_{a}^{b} x \,dx$
Limit	`\lim_{x \to 0} f(x)`	$\lim\_{x \to 0} f(x)$

Matrices and Vectors

Syntax	Description	Example
`\begin{matrix} a & b \\ c & d \end{matrix}`	Matrix	$\begin{matrix} a & b \\ c & d \end{matrix}$
`\begin{bmatrix} 1 & 2 \\ 3 & 4 \end{bmatrix}`	Bracketed Matrix	$\begin{bmatrix} 1 & 2 \\ 3 & 4 \end{bmatrix}$
`\mathbf{v}`	Bold Vector	$\mathbf{v}$

Special Symbols

Symbol	Syntax	Rendered Output
Partial Derivative	`\partial x`	$\partial x$
Nabla (Gradient)	`\nabla`	$\nabla$
Set Membership	`\in`	$\in$
Subset	`\subset`	$\subset$
Perpendicular	`\perp`	$\perp$
Angle	`\angle`	$\angle$

Grouping and Spacing

Syntax	Description	Example
`{}`	Grouping	$2^{(n+1)}$ → $2^{(n+1)}$
`\quad`	Large space	`x \quad y` → $x \quad y$
`\,`	Small space	`x\,y` → $x\,y$

Rendering using Remark

The code to render LaTeX as a markdown extension is fairly straightforward. The code is as follows:


import rehypeKatex from "rehype-katex";
import remarkMath from "remark-math";
import remarkGfm from "remark-gfm";

::    ::
<div className="markdown">
    <ReactMarkdown
        remarkPlugins={[....,remarkGfm, remarkMath]}
        rehypePlugins={[... rehypeKatex]}
        skipHtml={false}
        allowElement={() => true}
        components={components}
    >
        {content}
    </ReactMarkdown>
</div>

The only tricky thing is to get the Katex CSS file to work nicely with NextJS. One approach is to use a CDN (which isn't the best solution):

<html lang="en">
    <head>
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css"
            integrity="sha512-fHwaWebuwA7NSF5Qg/af4UeDx9XqUpYpOGgubo3yWu+b2IQR4UeQwbb42Ti7gVAjNtVoI/I9TEoYeu9omwcC6g=="
            crossOrigin="anonymous"
            referrerPolicy="no-referrer"
        />

But ultimately we want to inject it into the the global CSS:

// layout.tsx
import "katex/dist/katex.min.css";

Originally posted: September 1, 2022

Filed Under:

site

web