Using MDX

Support for MDX is built-in. You can use it to build React components and pages with Markdown. For an example, read this page's source code in src/app/(main)/guides/using-mdx/page.mdx.

Basics

Italic, bold, ~~strikethrough~~.

Headings

h3

h4

h5

h6

IDs are also supported (and will be picked up by the PageOverview component)

Links

Custom link: Example

Autolink: www.example.com, https://example.com, and contact@example.com.

Images

You can also scale the image (recommended as this reduces cumulative layout shifts):

Custom components

Quotes

This is a blockquote.

Multi-line is supported

Nested blockquote

Footnote

A note¹

Table

a	b	c	d
This	is	a	table
demonstrating	various	alignment	options.

Lists

You can make
normal lists
- And indent them like this

Or you can make
numbered lists
1. And indent them like this

Or you can make
task lists
- Again, indented like this
Update website www.example.com

Code

Use single backticks for inline code.

Normal code blocks

Normal code blocks

const code = 'syntax highlighting code blocks';

const code = 'syntax highlighting code blocks';

1const code = 'code block with line numbers';
2if (code) {
3    return "and multiple lines, too";
4}

1const code = 'code block with line numbers';
2if (code) {
3    return "and multiple lines, too";
4}

Dividers

Horizontal dividers

Math

You can write math like

\sqrt{a^2 + b^2}

Or you can do

123

Big note. ↩

.css-1gf1up0{--Icon-fontSize:calc(1em * 1);margin:var(--Typography-margin, 0px);display:inline;font-size:var(--Typography-fontSize, inherit);display:inline;}.css-1gf1up0>.MuiTypography-endDecorator{display:none;}.css-1gf1up0:hover>.MuiTypography-endDecorator{display:inline;}Using MDX