MDX Kitchen Sink

Table of contents

• Quickstart
• Code blocks
• Images
• Tables
• Mermaid diagrams
• Links
• Footnotes

Quickstart

Create a folder, add page.mdx, and drop assets next to it.

1. src/content/blog/my-post/page.mdx
2. src/content/blog/my-post/opengraph-image.png
3. Add opengraph-image.png next to the post

Tip: keep draft: true until you are ready to publish.

Code blocks

Use fenced blocks with a language for syntax highlighting.

type Post = {
  title: string;
  date: string;
};
 
const posts: Post[] = [
  { title: "Hello", date: "2025-01-01" },
];

Inline code like next.config.ts is styled too.

Images

Markdown images work with relative paths:

You can also use the MDX <Image /> component for optimized images:

Tables

GFM tables are enabled:

Mermaid diagrams

Use mermaid fenced blocks for diagrams:

flowchart LR
  Idea --> Sketch --> Prototype --> Ship

Links

Internal links stay client-side: Blog index

External links open in a new tab: Next.js

Footnotes

Here is a footnote reference.¹