Use KaTeX on astro

Use KaTeX on astro


Add libraries

yarn add rehype-katex remark-math

and pin versions(⚠ pin both, cause sometimes crash)

    "rehype-katex": "7.0.0",
    "remark-math": "5.1.1",

Add config on astro.config.mjs

export default defineConfig({
  site: 'https://nash1111rgba.com/',
  integrations: [mdx(), sitemap(), react()],
  markdown: {
    remarkPlugins: [remarkMath],
    rehypePlugins: [rehypeKatex]
  }
});

Result

both block and inline style works, for example

$X_t$, $X = \{ X_t : t \in T \}$

rendered as below
XtX_t, X={Xt:tT}X = \{ X_t : t \in T \}

$$
\begin{align*}
dW_t &\sim \mathcal{N}(0, dt) \\
dX_t &= \mu(t, X_t)dt + \sigma(t, X_t)dW_t \\
df(X_t) &= \left( \frac{\partial f}{\partial t} + \mu(t, X_t)\frac{\partial f}{\partial x} + \frac{1}{2}\sigma^2(t, X_t)\frac{\partial^2 f}{\partial x^2} \right)dt + \sigma(t, X_t)\frac{\partial f}{\partial x}dW_t
\end{align*}
$$

rendered as below

dWtN(0,dt)dXt=μ(t,Xt)dt+σ(t,Xt)dWtdf(Xt)=(ft+μ(t,Xt)fx+12σ2(t,Xt)2fx2)dt+σ(t,Xt)fxdWt\begin{align*} dW_t &\sim \mathcal{N}(0, dt) \\ dX_t &= \mu(t, X_t)dt + \sigma(t, X_t)dW_t \\ df(X_t) &= \left( \frac{\partial f}{\partial t} + \mu(t, X_t)\frac{\partial f}{\partial x} + \frac{1}{2}\sigma^2(t, X_t)\frac{\partial^2 f}{\partial x^2} \right)dt + \sigma(t, X_t)\frac{\partial f}{\partial x}dW_t \end{align*}