Code Block

Code blocks are automatically styled using rehype-highlight. You can use standard markdown syntax for code fences, and they will be beautifully highlighted.

Usage

Just use standard markdown code fences with a language identifier.

import { Button } from "@/components/ui/button";

export function MyComponent() {
  return <Button>Click me</Button>
}

With Title

You can add a title to a code block by adding title="Your Title" to the fence.

import { Button } from "@/components/ui/button";

export function MyComponent() {
  return <Button>Click me</Button>
}