Code Blocks
Syntax highlighted code blocks with copy button.
Code blocks are powered by Shiki via rehype-pretty-code. They support syntax highlighting for many languages with automatic light/dark theme switching.
Syntax Highlighting
import { useState } from "react";
export function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}Multiple Languages
TypeScript
interface User {
id: string;
name: string;
email: string;
}
function getUser(id: string): User {
return { id, name: "Alice", email: "alice@example.com" };
}Python
def fibonacci(n: int) -> list[int]:
sequence = [0, 1]
for _ in range(2, n):
sequence.append(sequence[-1] + sequence[-2])
return sequence[:n]JSON
{
"name": "my-docs",
"version": "1.0.0",
"scripts": {
"dev": "next dev",
"build": "next build"
}
}Inline Code
Use backticks for inline code: const x = 42.
Code blocks support all languages supported by Shiki. See the full list in the Shiki documentation.