Code Blocks and Syntax Highlighting

2026-01-14

Basic Code Block

Use the Code component to display syntax-highlighted code with a copy button:

function fibonacci(n: number): number {
	if (n <= 1) return n;
	return fibonacci(n - 1) + fibonacci(n - 2);
}

With Filename

Add a filename to help readers understand the file context:

export function calculateTotal(items: number[]): number {
	return items.reduce((sum, item) => sum + item, 0);
}

export function formatCurrency(amount: number): string {
	return new Intl.NumberFormat('en-US', {
		style: 'currency',
		currency: 'USD'
	}).format(amount);
}

Multiple Languages

The syntax highlighter supports many languages. Here are a few examples:

Python

def quicksort(arr):
	if len(arr) <= 1:
		return arr
	pivot = arr[0]
	left = [x for x in arr[1:] if x < pivot]
	right = [x for x in arr[1:] if x >= pivot]
	return quicksort(left) + [pivot] + quicksort(right)

JavaScript/JSX

export function Counter() {
	const [count, setCount] = useState(0);
	
	return (
		<div>
			<p>Count: {count}</p>
			<button onClick={() => setCount(count + 1)}>
				Increment
			</button>
		</div>
	);
}

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>My Page</title>
	</head>
	<body>
		<h1>Hello, World!</h1>
		<p>This is a paragraph.</p>
	</body>
</html>

Plain Text

You can also display plain text or CLI output:

$ npm run build
Compiled successfully in 2.3s
dist/index.html     12 KB
dist/bundle.js      245 KB
dist/bundle.css     45 KB

✓ Ready to deploy

Copying Code

Every code block has a copy button in the top-right corner (or floating in the corner for blocks without a filename). Click it to copy the code to your clipboard.