Add LaTeX Rendering Support

Caution

This recipe requires Astro v7, Starlight v0.41, Sätteri and @astrojs/markdown-satteri.

This guide shows you how to render LaTeX math formulas in your Starlight project using Sätteri and katex.

Step-by-step Guide

1. Install the required dependencies

   npm

   npm add katex satteri @astrojs/markdown-satteri

   pnpm

   pnpm add katex satteri @astrojs/markdown-satteri

   Yarn

   yarn add katex satteri @astrojs/markdown-satteri

   Bun

   bun add katex satteri @astrojs/markdown-satteri

2. Create the Sätteri KaTeX plugin

   Save the following code as src/plugins/satteri-katex.ts:

   src/plugins/satteri-katex.ts

   import katex from "katex";
   import { defineMdastPlugin } from "satteri";
   
   export const satteriKatex = defineMdastPlugin({
     name: "katex",
     math(node) {
       const html = katex.renderToString(node.value, {
         displayMode: true,
         throwOnError: false,
       });
       return { rawHtml: html };
     },
     inlineMath(node) {
       const html = katex.renderToString(node.value, {
         displayMode: false,
         throwOnError: false,
       });
       return { rawHtml: html };
     },
   });

3. Configure Sätteri processor in astro.config.mjs

   Open your astro.config.mjs file and configure the Sätteri processor with the satteriKatex plugin:

   astro.config.mjs

   import { satteri } from "@astrojs/markdown-satteri";
   import starlight from "@astrojs/starlight";
   import { satteriKatex } from "./src/plugins/satteri-katex";
   import { defineConfig } from "astro/config";
   
   export default defineConfig({
     markdown: {
       processor: satteri({
         mdastPlugins: [satteriKatex],
         features: {
           math: true,
         },
       }),
     },
     integrations: [
       starlight({
         customCss: ["katex/dist/katex.min.css"],
       }),
     ],
   });

Example Usage

Create a file like src/content/docs/example.mdx and add:

When $a\ne0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are

$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

The code above generates the following on the page:

When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are

$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

Resources

1. Sätteri
2. KaTeX documentation