Use KaTeX in Atro


This is a memo about how to configure KaTeX in Astro and how to use LaTeX.

Configure KaTeX in Astro

Add dependencies for KaTeX

pnpm install remark-math rehype-katex katex @astrojs/markdown-remark

Add the following config in astro.config.mjs

import { defineConfig } from "astro/config";
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";
import { unified } from "@astrojs/markdown-remark";

export default defineConfig({
  ...
  markdown: {
    processor: unified({
      remarkPlugins: [remarkMath],
      rehypePlugins: [rehypeKatex],
    }),
  },
})

Import the stylesheet into BaseHead.astro


import 'katex/dist/katex.min.css';

Use LaTeX in Markdown

For single-line LaTeX, add $ symbols on both sides. For multi-line LaTeX, add $$ at the beginning and end.

Single-line LaTeX

$\sqrt{3x-1}+(1+x)^2$

Output:

3x1+(1+x)2\sqrt{3x-1}+(1+x)^2

Multi-line LaTeX

$$
\begin{alignedat}{5}
P &\rarr Translate &\rarr P_T \\
V &\rarr Rotate &\rarr V_T
\end{alignedat}
$$

Output:

PTranslatePTVRotateVT\begin{alignedat}{5} P &\rarr Translate &\rarr P_T \\ V &\rarr Rotate &\rarr V_T \end{alignedat}
  1. KaTex support table