MDX components & syntax highlighting

This article exercises every MDX component shipped with DevfolioX, and confirms code highlighting works across languages.

Callouts

Code blocks

TypeScript, with line numbers:

import { MDXRemote } from "next-mdx-remote/rsc";
 
export async function MdxRenderer({ source }: { source: string }) {
  return <MDXRemote source={source} />;
}

Bash:

npm run cf:build && npm run cf:deploy

Python:

def hello(name: str) -> str:
    return f"hi, {name}"

A fenced block with no language (must not throw):

just plain text — no highlighting needed.

Inline code should also style nicely.

Keyboard shortcut

Press + to open the command palette.

Figure with caption

YouTube

Tweet fallback

Standard markdown

Lists, blockquotes, links, and emphasis all work as expected.

"Ship the smallest thing that's actually useful, then keep iterating."

• One
• Two
• Three