Math support in markdown

aka LaTeX, KaTeX, MathJAX

Installation

1. Install dependencies

   pnpm add katex rehype-katex remark-math

2. Configure Astro

   astro.config.mjs

   import remarkMath from "remark-math";
   import rehypeKatex from "rehype-katex";
   
   export default defineConfig({
     integrations: [
       starlight({
         customCss: ["./src/styles/custom.css"],
       }),
     ],
     markdown: {
       remarkPlugins: [remarkMath],
       rehypePlugins: [rehypeKatex],
     },
     vite: {
       ssr: {
         noExternal: ["katex"],
       },
     },
   });

3. Add CSS

   src/styles/custom.css

   @import url(katex/dist/katex.min.css);

Example

example.md

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

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