Markdown Syntax

Introduction

Fumadocs provides many useful extensions to MDX, a markup language. Here is a brief introduction to the default MDX syntax of Fumadocs.

MDX is not the only supported format of Fumadocs. In fact, you can use any renderers such as next-mdx-remote or CMS.

MDX

We recommend MDX, a superset of Markdown with JSX syntax. It allows you to import components, and use them right in the document, or even export values.

See:

MDX Syntax.
GFM (GitHub Flavored Markdown) is also supported, see GFM Specification.

---
title: This is a document
---
 
import { Component } from './component';
 
<Component name="Hello" />
 
# Heading
 
## Heading
 
### Heading
 
#### Heading
 
Hello World, **Bold**, _Italic_, ~~Hidden~~
 
1. First
2. Second
3. Third
 
- Item 1
- Item 2
 
> Quote here
 
![alt](/image.png)
 
| Table | Description |
| ----- | ----------- |
| Hello | World       |

Images

Images are automatically optimized for next/image.

![Image](/image.png)

Auto Links

Internal links use the next/link component to allow prefetching and avoid hard-reload.

External links will get the default rel="noreferrer noopener" target="_blank" attributes for security.

[My Link](https://github.github.com/gfm)
 
This also works: https://github.github.com/gfm.

Cards

Useful for adding links.

import { HomeIcon } from 'lucide-react';
 
<Cards>
  <Card
    href="https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating"
    title="Fetching, Caching, and Revalidating"
  >
    Learn more about caching in Next.js
  </Card>
  <Card title="href is optional">Learn more about `fetch` in Next.js.</Card>
  <Card icon={<HomeIcon />} href="/" title="Home">
    You can include icons too.
  </Card>
</Cards>

Fetching, Caching, and Revalidating

Learn more about caching in Next.js

href is optional

Learn more about fetch in Next.js.

Home

You can include icons too.

Callouts

Useful for adding tips/warnings, it is included by default. You can specify the type of callout:

info (default)
warn
error

<Callout>Hello World</Callout>
 
<Callout title="Title">Hello World</Callout>
 
<Callout title="Title" type="error">
  Hello World
</Callout>

Hello World

Title

Hello World

Title

Hello World

Headings

An anchor is automatically applied to each heading, it sanitizes invalid characters like spaces. (e.g. Hello World to hello-world)

# Hello `World`

TOC Settings

The table of contents (TOC) will be generated based on headings, you can also customise the effects of headings:

# Heading [!toc]
 
This heading will be hidden from TOC.
 
# Another Heading [toc]
 
This heading will **only** be visible in TOC, you can use it to add additional TOC items.
Like headings rendered in a React component:
 
<MyComp />

Custom Anchor

You can add [#slug] to customise heading anchors.

# heading [#my-heading-id]

You can also chain it with TOC settings like:

# heading [toc] [#my-heading-id]

To link people to a specific heading, add the heading id to hash fragment: /page#my-heading-id.

Tab Groups

You can use code blocks with the <Tab /> component.

import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 
```ts tab="Tab 1"
console.log('A');
```
 
```ts tab="Tab 2"
console.log('B');
```

Note that you can add MDX components instead of importing them in MDX files.

console.log('A');

Include

Reference another file (can also be a Markdown/MDX document). Specify the target file path in <include> tag (relative to the MDX file itself).

page.mdx

<include>./another.mdx</include>

See other usages.

Mermaid

Rendering diagrams in your docs

<Mermaid
  chart="
graph TD;
subgraph AA [Consumers]
A[Mobile app];
B[Web app];
C[Node.js client];
end
subgraph BB [Services]
E[REST API];
F[GraphQL API];
G[SOAP API];
end
Z[GraphQL API];
A --> Z;
B --> Z;
C --> Z;
Z --> E;
Z --> F;
Z --> G;"
/>

LaTeX

Fumadocs supports LaTeX through the Latex component.

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.

Fetching, Caching, and Revalidating

href is optional

Home

On this page