Writing richer posts with MDX components

Plain Markdown covers ninety percent of writing. For the other ten, this template supports MDX: rename any post from .md to .mdx and you can import components right inside the text.

Callouts

Code still gets highlighted

Fenced code blocks in MDX use the same Shiki themes as Markdown and Notion posts:

import Callout from "../../components/mdx/Callout.astro";

<Callout type="note" title="Hello">
  Any Astro component works here.
</Callout>

Build your own

A component in three steps

1. Create src/components/mdx/MyThing.astro.
2. Import it at the top of your .mdx post.
3. Use it like an HTML tag.

Design is not just what it looks like and feels like. Design is how it works.

That’s it — the table of contents, reading time, cover art and prev/next navigation all work exactly as they do for Markdown.