Add LaTeX to Starlight

This guide leads you use LaTeX in Starlight.

Steps by steps

Section titled Steps by steps

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}$