TL;DR
Why MDX
Plain Markdown is great for prose but can't express callouts, step lists or comparison tables. MDX lets you drop in components exactly where you need them.
Whitelist
Only components on the sanitizer whitelist may appear in MDX. This keeps authored content safe to render.
Adding a block
tsx
// 1. Create the component, 2. register it in components/mdx-blocks/index.ts,
// 3. add its name to the sanitizer whitelist.
export function Highlight({ children }: { children: React.ReactNode }) {
return <mark className="bg-accent-soft">{children}</mark>
}