Markdown Components

Markdown rendering uses TanStack Markdown (@tanstack/markdown/react) and TanStack Highlight for fenced code. One component covers docs, posts, changelog, and legal pages.

ServerMdx

import { ServerMdx } from "@/features/markdown/server-mdx";

const markdown = `
# Hello World

This is a paragraph

- Item 1
- Item 2

\`\`\`ts
const answer = 42
\`\`\`
`;

export default function Page() {
  return <ServerMdx source={markdown} />;
}

Props

• source: string - Markdown content to render
• className?: string - Extra classes on the wrapper (the typography class stays applied)

The highlighter is registered once in src/features/markdown/highlighter.ts. Current languages: CSS, HTML, JS, JSON, JSX, plaintext, Python, shell/bash, TS, TSX. curl aliases to bash. Unknown languages fall back to escaped plaintext.

GitHub light/dark themes come from TanStack Highlight and follow the next-themes .dark class. Theme changes do not re-highlight.

TanStack Markdown does not evaluate MDX/JSX. content/**/*.mdx files stay Markdown plus frontmatter.

FAQ

Where do I add a language?

In src/features/markdown/highlighter.ts: import the definition from @tanstack/highlight/languages/<name> and add it to the languages array.

Can I embed React components in Markdown?

No. Replace intrinsic tags through components on <Markdown> if you need a custom a or pre. Do not evaluate author JSX.