How to render math equations with Markdown and Nextjs

Last week, I was working on a personal website for an astrophysicist, and one of the requirements was the ability to include math equations in blog posts. The client is familiar with both Markdown and LaTeX, so my task was to simply make them work nicely together in the NextJS app.

To accomplish this, we needed two parts:

1. A Markdown processor that supports math syntax to Markdown documents, specifically one that enables the use of inline and display math equations in LaTeX syntax.
2. A plugin that transformes the LaTeX math syntax into HTML as nice-looking math equations.

The most popular options at the moment are:

• remarkMath + rehype-katex

• remarkMath + rehype-mathjax

Both MathJax and KaTeX would work for my requirements as they both support LaTeX notation. MathJax works with a wider range of mathematical syntax, including MathML, AsciiMath, and TeX. However, I choose KateX because it is faster and more lightweight than MathJax.

To implement math in Markdown for a Next.js app, we do the following steps:

1. Install the necessary dependencies

You can install both plugins using the following command:

npm i remark-math rehype-katex

2. Update configs next.config.js

import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'

const nextConfig = {
  pageExtensions: ['js', 'jsx', 'mdx'],
  ...
  webpack(config, options) {
    config.module.rules.push({
      test: /\.mdx?$/,
      use: [
        options.defaultLoaders.babel,
        {
          loader: '@mdx-js/loader',
          options: {
            remarkPlugins: [remarkMath],
            rehypePlugins: [rehypeKatex],
          },
        },
      ],
    })
    return config
  },
}

export default nextConfig

3. Add styles

The plugins will convert math equations into HTML. To style the formulas we need to import styles to _app.jsx:

import 'katex/dist/katex.min.css'

Before:

After:

4. Use LaTeX in your markdown files

KateX supports both inline and block equations. Use $ delimiters to show math inline:

**Inline mode**

This is an inline equation: $e = mc^2$

$$8a_2 + 3b^2 = x^2$$ this is another inline equation

Result:

**Displayed mode**

$$
a^2 + b^2 = c^2
$$

$$
\sum_{i=1}^n X_i
$$

Matrix looks nice too!

$$
x + \begin{bmatrix} 3 & 2 \\ 1 & 0 \end{bmatrix} = \begin{bmatrix} 6 & 3 \\ 7 & -1 \end{bmatrix}
$$

Result:

You can also use \begin{equation} ... \end{equation} in case you prefer numbered equations:

$$
\begin{equation} \begin{pmatrix}
a & b \cr
c & d
\end{pmatrix}
+
\begin{pmatrix}
e & f \cr
g & h
\end{pmatrix}
\end{equation}
$$

$$
\begin{equation} \begin{bmatrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{bmatrix} \cdot \begin{bmatrix} 1 \\ 2 \\ 3 \end{bmatrix} = \begin{bmatrix} 14 \\ 32 \\ 50 \end{bmatrix} \end{equation}
$$

$$
\begin{equation}
\begin{bmatrix}
1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9
\end{bmatrix} \cdot \begin{bmatrix}
1 \\ 2 \\ 3 \end{bmatrix} =
\begin{bmatrix} 14 \\ 32 \\ 50
\end{bmatrix}
\end{equation}
$$

Result:

And this is it, we just implemented math in MDX.