Code Blocks, Highlighting and Copy Buttons

A sample post full of code samples, for checking syntax highlighting in light and dark mode.

Jane Doe 10 October 2026 Updated 20 October 2026 1 min read

Red, green and blue circles overlapping to mix into yellow, cyan, magenta and white

This sample post is mostly code. Hover over a block to show its copy button, and switch themes to check both highlight palettes.

TypeScript#

interface Post {
	slug: string;
	title: string;
	date?: string;
}

export function sortByDate(posts: Post[]): Post[] {
	return [...posts].sort((a, b) => (b.date ?? '').localeCompare(a.date ?? ''));
}

Svelte#

<script lang="ts">
	let count = $state(0);
</script>

<button onclick={() => count++}>
	Clicked {count}
	{count === 1 ? 'time' : 'times'}
</button>

Shell#

pnpm install
pnpm dev --open

Inline code#

Short snippets such as const answer = 42 or pnpm build sit inside the paragraph and get a subtle background.

A longer example#

// Debounce a function so it only runs after `wait` ms of quiet.
export function debounce(fn, wait = 200) {
	let timer;
	return (...args) => {
		clearTimeout(timer);
		timer = setTimeout(() => fn(...args), wait);
	};
}

That’s enough code for one post.