Add LaTeX to Starlight

This guide shows you how to use LaTeX in Starlight.

Step-by-step Guide

Section titled Step-by-step Guide

1. Start by installing the remark-math ↗ and rehype-katex ↗ package using your favorite package manager:

   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. Add katex, rehype-katex, and remark-math in astro.config.mjs:

   astro.config.mjs

   // ...
   import remarkMath from "remark-math";
   import rehypeKatex from "rehype-katex";
   
   export default defineConfig({
     // ...
     markdown: {
       remarkPlugins: [remarkMath],
       rehypePlugins: [rehypeKatex],
     },
     integrations: [
       starlight({
         // ...
         customCss: ["katex/dist/katex.min.css"],
       }),
     ],
   })

Example

Section titled Example

src/content/docs/example.mdx

When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
$$ x = {-b \pm \sqrt{b^2-4ac} \over 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 = {-b \pm \sqrt{b^2-4ac} \over 2a}$