Add LaTeX Rendering Support

This guide shows you how to render LaTeX math formulas in your Starlight project using remark-math and rehype-katex.

Step-by-step Guide

1. Install the required dependencies

   npm

   npm add katex rehype-katex remark-math

   pnpm

   pnpm add katex rehype-katex remark-math

   Yarn

   yarn add katex rehype-katex remark-math

   Bun

   bun add katex rehype-katex remark-math

2. Configure Markdown plugins in astro.config.mjs

   Open your astro.config.mjs file and configure both the remark and rehype plugins:

   astro.config.mjs

   import { defineConfig } from "astro/config";
   import remarkMath from "remark-math";
   import rehypeKatex from "rehype-katex";
   import starlight from "@astrojs/starlight";
   
   export default defineConfig({
     markdown: {
       remarkPlugins: [remarkMath],
       rehypePlugins: [rehypeKatex],
     },
     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. remark-math
2. rehype-katex
3. KaTeX documentation