Math

Getting Started

npm install remark-math rehype-katex katex

pnpm add remark-math rehype-katex katex

yarn add remark-math rehype-katex katex

bun add remark-math rehype-katex katex

Add Plugins

Add the required remark/rehype plugins, the code might be vary depending on your content source.

source.config.ts

import rehypeKatex from 'rehype-katex';
import remarkMath from 'remark-math';
import { defineConfig } from 'fumadocs-mdx/config';

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [remarkMath],
    // Place it at first, it should be executed before the syntax highlighter
    rehypePlugins: (v) => [rehypeKatex, ...v],
  },
});

Add Stylesheet

Add the following to root layout to make it looks great:

layout.tsx

import 'katex/dist/katex.css';

Done

Type some TeX expression in your documents, like the Pythagoras theorem:

Inline: $$c = \pm\sqrt{a^2 + b^2}$$

```math
c = \pm\sqrt{a^2 + b^2}
```

Inline: $c = \pm\sqrt{a^2 + b^2}$

c = \pm\sqrt{a^2 + b^2}

Taylor Expansion (expressing holomorphic function $f(x)$ in power series):

\displaystyle {\begin{aligned}T_{f}(z)&=\sum _{k=0}^{\infty }{\frac {(z-c)^{k}}{2\pi i}}\int _{\gamma }{\frac {f(w)}{(w-c)^{k+1}}}\,dw\\&={\frac {1}{2\pi i}}\int _{\gamma }{\frac {f(w)}{w-c}}\sum _{k=0}^{\infty }\left({\frac {z-c}{w-c}}\right)^{k}\,dw\\&={\frac {1}{2\pi i}}\int _{\gamma }{\frac {f(w)}{w-c}}\left({\frac {1}{1-{\frac {z-c}{w-c}}}}\right)\,dw\\&={\frac {1}{2\pi i}}\int _{\gamma }{\frac {f(w)}{w-z}}\,dw=f(z),\end{aligned}}

Tip

You can actually copy equations on Wikipedia, they will be converted into a KaTeX string when you paste it.

\displaystyle S[{\boldsymbol {q}}]=\int _{a}^{b}L(t,{\boldsymbol {q}}(t),{\dot {\boldsymbol {q}}}(t))\,dt.

Getting Started

Add Plugins

Add Stylesheet

Done

On this page