diff --git a/web/src/app.css b/web/src/app.css
index 4e7845e7e..ff26e7d99 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -178,6 +178,19 @@ html {
 	--color-ansi-bright-cyan: #04a5e5;
 	--color-ansi-bright-white: #bcc0cc;
 
+	--color-syntax-foreground: #4c4f69;
+	--color-syntax-comment: #7c7f93;
+	--color-syntax-string: #40a02b;
+	--color-syntax-keyword: #8839ef;
+	--color-syntax-function: #1e66f5;
+	--color-syntax-constant: #fe640b;
+	--color-syntax-parameter: #e64553;
+	--color-syntax-punctuation: #7c7f93;
+	--color-syntax-link: #1e66f5;
+	--color-syntax-inserted: #40a02b;
+	--color-syntax-deleted: #d20f39;
+	--color-syntax-changed: #df8e1d;
+
 	--animate-spin-step: spin-step 2.5s infinite;
 
 	@keyframes spin-step {
@@ -690,6 +703,19 @@ html {
 			--color-ansi-bright-magenta: #f4dbd6;
 			--color-ansi-bright-cyan: #91d7e3;
 			--color-ansi-bright-white: #f0c6c6;
+
+			--color-syntax-foreground: #cdd6f4;
+			--color-syntax-comment: #9399b2;
+			--color-syntax-string: #a6e3a1;
+			--color-syntax-keyword: #cba6f7;
+			--color-syntax-function: #89b4fa;
+			--color-syntax-constant: #fab387;
+			--color-syntax-parameter: #eba0ac;
+			--color-syntax-punctuation: #9399b2;
+			--color-syntax-link: #89b4fa;
+			--color-syntax-inserted: #a6e3a1;
+			--color-syntax-deleted: #f38ba8;
+			--color-syntax-changed: #f9e2af;
 		}
 	}
 
@@ -705,5 +731,5 @@ html {
 
 /* chromium doesn't break links so we have to set it explicitely */
 p > a {
-    line-break: anywhere;
+	line-break: anywhere;
 }
diff --git a/web/src/lib/components/comment/Comment.svelte b/web/src/lib/components/comment/Comment.svelte
index 1d78dee54..3d847e9fa 100644
--- a/web/src/lib/components/comment/Comment.svelte
+++ b/web/src/lib/components/comment/Comment.svelte
@@ -5,6 +5,7 @@
 	import Separator from "$lib/components/ui/Separator.svelte";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import Reactions from "$lib/components/reaction/Reactions.svelte";
+	import { enhanceCodeblocks } from "$lib/markup/highlight";
 	import type { ReactionGroup } from "$lib/components/reaction/reactions";
 
 	interface Props {
@@ -62,8 +63,10 @@
 			{#if editor}
 				<div class="mt-1">{@render editor()}</div>
 			{:else if bodyHtml}
-				<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
-				<article class="markup mt-1">{@html bodyHtml}</article>
+				<article class="markup mt-1" use:enhanceCodeblocks={bodyHtml}>
+					<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
+					{@html bodyHtml}
+				</article>
 			{:else if body}
 				<article class="mt-1 whitespace-pre-wrap text-foreground-default">{body}</article>
 			{/if}
diff --git a/web/src/lib/components/repo/BlobView.svelte b/web/src/lib/components/repo/BlobView.svelte
index dad6f0688..11fac4bbe 100644
--- a/web/src/lib/components/repo/BlobView.svelte
+++ b/web/src/lib/components/repo/BlobView.svelte
@@ -5,6 +5,7 @@
 	import BlobHeader from "$lib/components/repo/BlobHeader.svelte";
 	import { languageForPath } from "$lib/components/repo/languageColors";
 	import LastCommitPanel from "$lib/components/repo/LastCommitPanel.svelte";
+	import { enhanceCodeblocks } from "$lib/markup/highlight";
 	import PierreFile from "$lib/components/repo/PierreFile.svelte";
 	import { baseName, fileHistoryHref } from "$lib/components/repo/urls";
 	import { createBlame, type BlameSource } from "$lib/components/repo/blame/request.svelte";
@@ -185,8 +186,10 @@
 			</video>
 		</div>
 	{:else if blob.kind === "markup" && view === "rendered" && blob.renderedHtml !== null}
-		<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
-		<div class="markup overflow-x-auto">{@html blob.renderedHtml}</div>
+		<div class="markup overflow-x-auto" use:enhanceCodeblocks={blob.renderedHtml}>
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
+			{@html blob.renderedHtml}
+		</div>
 	{:else if blob.contents !== null}
 		<div bind:this={codeHost}>
 			<PierreFile
diff --git a/web/src/lib/components/repo/Readme.svelte b/web/src/lib/components/repo/Readme.svelte
index 7c6e6919d..41942e9fe 100644
--- a/web/src/lib/components/repo/Readme.svelte
+++ b/web/src/lib/components/repo/Readme.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import FileText from "$icon/file-text";
 	import Card from "$lib/components/ui/Card.svelte";
+	import { enhanceCodeblocks } from "$lib/markup/highlight";
 
 	interface Props {
 		filename: string;
@@ -19,8 +20,10 @@
 		</span>
 	</div>
 	{#if html}
-		<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
-		<div class="markup overflow-x-auto px-6 py-4">{@html html}</div>
+		<div class="markup overflow-x-auto px-6 py-4" use:enhanceCodeblocks={html}>
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
+			{@html html}
+		</div>
 	{:else}
 		<div class="overflow-x-auto px-6 py-4">
 			<pre
diff --git a/web/src/lib/components/repo/pierre.ts b/web/src/lib/components/repo/pierre.ts
index 8e0042294..338b966a8 100644
--- a/web/src/lib/components/repo/pierre.ts
+++ b/web/src/lib/components/repo/pierre.ts
@@ -15,25 +15,11 @@ import type { WorkerPoolManager } from "@pierre/diffs/worker";
 // FileDiff instances
 export type DiffStyle = NonNullable<FileDiffOptions<undefined, undefined>["diffStyle"]>;
 
-const PIERRE_THEME_NAME = "tangled";
+export const PIERRE_THEME_NAME = "tangled";
 
 registerCustomCSSVariableTheme(PIERRE_THEME_NAME, {
-	// pierre.css defines the real tokens on diffs-container, these are just
-	// fallbacks for the generated bindings
 	background: "#ffffff",
-	foreground: "#4c4f69",
-	"token-comment": "#7c7f93",
-	"token-string": "#40a02b",
-	"token-string-expression": "#40a02b",
-	"token-keyword": "#8839ef",
-	"token-function": "#1e66f5",
-	"token-constant": "#fe640b",
-	"token-parameter": "#e64553",
-	"token-punctuation": "#7c7f93",
-	"token-link": "#1e66f5",
-	"token-inserted": "#40a02b",
-	"token-deleted": "#d20f39",
-	"token-changed": "#df8e1d"
+	foreground: "#4c4f69"
 });
 
 // pierre skips highlighting lines past 1e3 chars by default.
diff --git a/web/src/lib/components/repo/pulls/PullReviewComment.svelte b/web/src/lib/components/repo/pulls/PullReviewComment.svelte
index 8d9d044e4..34f5f8c38 100644
--- a/web/src/lib/components/repo/pulls/PullReviewComment.svelte
+++ b/web/src/lib/components/repo/pulls/PullReviewComment.svelte
@@ -8,6 +8,7 @@
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import User from "$lib/components/ui/User.svelte";
 	import type { MarkupContext } from "$lib/markup";
+	import { enhanceCodeblocks } from "$lib/markup/highlight";
 	import { renderMarkdown } from "$lib/markup/markdown";
 	import PullReviewCommentEditor from "$lib/components/repo/pulls/PullReviewCommentEditor.svelte";
 
@@ -32,7 +33,7 @@
 	}: Props = $props();
 
 	async function submit(body: string) {
-		const bodyHtml = renderMarkdown(body, markup);
+		const bodyHtml = await renderMarkdown(body, markup);
 		await onedit({ ...comment, body, bodyHtml });
 		editing = false;
 	}
@@ -94,7 +95,10 @@
 			/>
 		{:else}
 			{#if comment.bodyHtml}
-				<article class="markup mt-1 {active ? '' : 'text-foreground-muted'}">
+				<article
+					class="markup mt-1 {active ? '' : 'text-foreground-muted'}"
+					use:enhanceCodeblocks={comment.bodyHtml}
+				>
 					<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
 					{@html comment.bodyHtml}
 				</article>
diff --git a/web/src/lib/components/repo/tickets/TicketBody.svelte b/web/src/lib/components/repo/tickets/TicketBody.svelte
index 1d321bcb2..6355bbe94 100644
--- a/web/src/lib/components/repo/tickets/TicketBody.svelte
+++ b/web/src/lib/components/repo/tickets/TicketBody.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { enhanceCodeblocks } from "$lib/markup/highlight";
+
 	interface Props {
 		// raw markdown source, used as a fallback when rendering was skipped
 		body: string;
@@ -11,7 +13,7 @@
 
 {#if bodyHtml}
 	<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
-	<article class="markup">{@html bodyHtml}</article>
+	<article class="markup" use:enhanceCodeblocks={bodyHtml}>{@html bodyHtml}</article>
 {:else if body}
 	<article class="whitespace-pre-wrap text-foreground-default">{body}</article>
 {/if}
diff --git a/web/src/lib/components/ui/MarkdownEditor.svelte b/web/src/lib/components/ui/MarkdownEditor.svelte
index 3115a74bf..bbec4c641 100644
--- a/web/src/lib/components/ui/MarkdownEditor.svelte
+++ b/web/src/lib/components/ui/MarkdownEditor.svelte
@@ -8,6 +8,7 @@
 	import Pending from "$lib/components/ui/Pending.svelte";
 	import Textarea, { textareaMinHeight } from "$lib/components/ui/Textarea.svelte";
 	import { renderMarkup, type MarkupContext } from "$lib/markup";
+	import { enhanceCodeblocks } from "$lib/markup/highlight";
 
 	interface Props {
 		value?: string;
@@ -121,7 +122,7 @@
 			{/snippet}
 			{@const html = await preview}
 			{#if html}
-				<div class={`markup ${pane} ${surface}`}>
+				<div class={`markup ${pane} ${surface}`} use:enhanceCodeblocks={html}>
 					<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
 					{@html html}
 				</div>
diff --git a/web/src/lib/markup/highlight.ts b/web/src/lib/markup/highlight.ts
new file mode 100644
index 000000000..2107c3bc7
--- /dev/null
+++ b/web/src/lib/markup/highlight.ts
@@ -0,0 +1,145 @@
+import type { Action } from "svelte/action";
+import { PIERRE_THEME_NAME } from "$lib/components/repo/pierre";
+
+const BLOCK = /<pre><code class="language-([^"]+)">([\s\S]*?)<\/code><\/pre>/g;
+
+const MAX_SSR_BLOCK_CHARS = 50_000;
+
+const MAX_CSR_BLOCK_CHARS = 200_000;
+
+const ENTITIES: Record<string, string> = {
+	amp: "&",
+	lt: "<",
+	gt: ">",
+	quot: '"',
+	"#39": "'",
+	"#x27": "'",
+	"#x2F": "/"
+};
+
+const decodeEntities = (value: string): string =>
+	value.replace(/&(#x[0-9a-fA-F]+|#\d+|[a-zA-Z#0-9]+);/g, (match, body: string) => {
+		if (body.startsWith("#x") || body.startsWith("#X"))
+			try {
+				return String.fromCodePoint(parseInt(body.slice(2), 16));
+			} catch {
+				return match;
+			}
+		if (body.startsWith("#")) {
+			const point = parseInt(body.slice(1), 10);
+			return Number.isNaN(point) ? match : String.fromCodePoint(point);
+		}
+		return ENTITIES[body] ?? match;
+	});
+
+const INNER = /<code[^>]*>([\s\S]*)<\/code>\s*<\/pre>/;
+
+type Highlighter = Awaited<ReturnType<typeof import("@pierre/diffs").getSharedHighlighter>>;
+
+const loadHighlighter = async (langs: string[]): Promise<Highlighter | null> => {
+	try {
+		const { getSharedHighlighter } = await import("@pierre/diffs");
+		return await getSharedHighlighter({ themes: [PIERRE_THEME_NAME], langs });
+	} catch {
+		return null;
+	}
+};
+
+const highlightInner = (highlighter: Highlighter, code: string, lang: string): string | null => {
+	let full: string;
+	try {
+		full = highlighter.codeToHtml(code, {
+			lang,
+			theme: PIERRE_THEME_NAME,
+			defaultColor: false,
+			cssVariablePrefix: "--diffs-token-"
+		});
+	} catch {
+		return null;
+	}
+	return INNER.exec(full)?.[1] ?? null;
+};
+
+export const highlightCodeblocks = async (html: string): Promise<string> => {
+	const found = [...html.matchAll(BLOCK)];
+	if (found.length === 0) return html;
+
+	const blocks = found.flatMap((match) => {
+		const [raw, lang, escaped] = match as unknown as [string, string, string];
+		const code = decodeEntities(escaped);
+		return code.length > 0 && code.length <= MAX_SSR_BLOCK_CHARS ? [{ raw, lang, code }] : [];
+	});
+	if (blocks.length === 0) return html;
+
+	const highlighter = await loadHighlighter([...new Set(blocks.map((block) => block.lang))]);
+	if (!highlighter) return html;
+
+	const swapped = new Map<string, string>();
+	for (const block of blocks) {
+		if (swapped.has(block.raw)) continue;
+		const inner = highlightInner(highlighter, block.code, block.lang);
+		if (inner !== null)
+			swapped.set(
+				block.raw,
+				`<pre><code class="language-${block.lang}">${inner}</code></pre>`
+			);
+	}
+	if (swapped.size === 0) return html;
+	return html.replace(BLOCK, (raw) => swapped.get(raw) ?? raw);
+};
+
+const LANG = /(?:^|\s)language-([^\s]+)/;
+
+const idle = (): Promise<void> =>
+	new Promise((resolve) => {
+		const ric = (
+			globalThis as {
+				requestIdleCallback?: (cb: () => void, opts?: { timeout: number }) => void;
+			}
+		).requestIdleCallback;
+		if (typeof ric === "function") ric(() => resolve(), { timeout: 1500 });
+		else setTimeout(resolve, 0);
+	});
+
+export const enhanceCodeblocks: Action<HTMLElement, unknown> = (node) => {
+	let cancelled = false;
+
+	const run = async (): Promise<void> => {
+		const plain = (el: Element): { code: HTMLElement; text: string } | null => {
+			const code = el.firstElementChild;
+			if (!(code instanceof HTMLElement) || code.querySelector("span") !== null) return null;
+			const text = code.textContent ?? "";
+			return text.length > 0 && text.length <= MAX_CSR_BLOCK_CHARS ? { code, text } : null;
+		};
+		const targets = [...node.querySelectorAll("pre")].flatMap((pre) => {
+			const found = plain(pre);
+			if (!found) return [];
+			const lang = LANG.exec(found.code.className)?.[1];
+			return lang ? [{ ...found, lang }] : [];
+		});
+		if (targets.length === 0) return;
+
+		await idle();
+		if (cancelled || !node.isConnected) return;
+		const highlighter = await loadHighlighter([
+			...new Set(targets.map((target) => target.lang))
+		]);
+		if (!highlighter || cancelled) return;
+
+		for (const target of targets) {
+			if (cancelled || !target.code.isConnected) continue;
+			// a re-render may have highlighted it since
+			if (target.code.querySelector("span") !== null) continue;
+			const inner = highlightInner(highlighter, target.text, target.lang);
+			if (inner !== null) target.code.innerHTML = inner;
+		}
+	};
+
+	void run();
+	return {
+		update: () => void run(),
+		destroy: () => {
+			cancelled = true;
+		}
+	};
+};
diff --git a/web/src/lib/markup/markdown.test.ts b/web/src/lib/markup/markdown.test.ts
index 5604862df..4b3562892 100644
--- a/web/src/lib/markup/markdown.test.ts
+++ b/web/src/lib/markup/markdown.test.ts
@@ -8,7 +8,7 @@ const render = (source: string, overrides: Partial<MarkupContext> = {}) =>
 	renderMarkdown(source, { ...ctx, ...overrides });
 
 describe("isMarkdownFile", () => {
-	it("knows the markdown extensions from the plain text ones", () => {
+	it("knows the markdown extensions from the plain text ones", async () => {
 		expect(isMarkdownFile("README.md")).toBe(true);
 		expect(isMarkdownFile("readme.MARKDOWN")).toBe(true);
 		expect(isMarkdownFile("readme.mkd")).toBe(true);
@@ -18,71 +18,73 @@ describe("isMarkdownFile", () => {
 });
 
 describe("renderMarkdown", () => {
-	it("renders gfm tables and strikethrough", () => {
-		const html = render("| a | b |\n| - | - |\n| 1 | 2 |\n\n~~gone~~");
+	it("renders gfm tables and strikethrough", async () => {
+		const html = await render("| a | b |\n| - | - |\n| 1 | 2 |\n\n~~gone~~");
 		expect(html).toContain("<table>");
 		expect(html).toContain("<s>gone</s>");
 	});
 
-	it("gives headings github's slugs and an anchor link", () => {
-		const html = render("## Hello, World!");
+	it("gives headings github's slugs and an anchor link", async () => {
+		const html = await render("## Hello, World!");
 		expect(html).toContain('id="hello-world"');
 		expect(html).toContain('<a class="anchor" href="#hello-world">#</a>');
 	});
 
-	it("points relative links at the file browser", () => {
-		expect(render("[docs](./docs/setup.md)")).toContain(
+	it("points relative links at the file browser", async () => {
+		expect(await render("[docs](./docs/setup.md)")).toContain(
 			'href="/ada.test/infra/tree/main/docs/setup.md"'
 		);
 	});
 
-	it("resolves a link against the directory the document is in", () => {
-		const html = render("[sibling](../other.md)", { dir: "docs/guide" });
+	it("resolves a link against the directory the document is in", async () => {
+		const html = await render("[sibling](../other.md)", { dir: "docs/guide" });
 		expect(html).toContain('href="/ada.test/infra/tree/main/docs/other.md"');
 	});
 
-	it("treats an absolute path as repo relative, not host relative", () => {
-		expect(render("[root](/LICENSE)", { dir: "docs" })).toContain(
+	it("treats an absolute path as repo relative, not host relative", async () => {
+		expect(await render("[root](/LICENSE)", { dir: "docs" })).toContain(
 			'href="/ada.test/infra/tree/main/LICENSE"'
 		);
 	});
 
-	it("keeps a fragment on a rewritten link", () => {
-		expect(render("[part](./setup.md#install)")).toContain(
+	it("keeps a fragment on a rewritten link", async () => {
+		expect(await render("[part](./setup.md#install)")).toContain(
 			'href="/ada.test/infra/tree/main/setup.md#install"'
 		);
 	});
 
-	it("leaves fragments, mail and absolute urls alone", () => {
-		const html = render("[a](#top) [b](mailto:ada@test) [c](https://example.com)");
+	it("leaves fragments, mail and absolute urls alone", async () => {
+		const html = await render("[a](#top) [b](mailto:ada@test) [c](https://example.com)");
 		expect(html).toContain('href="#top"');
 		expect(html).toContain('href="mailto:ada@test"');
 		expect(html).toContain('href="https://example.com"');
 	});
 
-	it("marks off-site links as untrusted", () => {
-		expect(render("[c](https://example.com)")).toContain('rel="nofollow noopener noreferrer"');
-		expect(render("[a](./x.md)")).not.toContain("nofollow");
+	it("marks off-site links as untrusted", async () => {
+		expect(await render("[c](https://example.com)")).toContain(
+			'rel="nofollow noopener noreferrer"'
+		);
+		expect(await render("[a](./x.md)")).not.toContain("nofollow");
 	});
 
-	it("points relative images at the raw file, including raw html ones", () => {
-		expect(render("![logo](assets/logo.png)")).toContain(
+	it("points relative images at the raw file, including raw html ones", async () => {
+		expect(await render("![logo](assets/logo.png)")).toContain(
 			'src="/ada.test/infra/raw/main/assets/logo.png"'
 		);
-		expect(render('<img src="assets/logo.png" alt="logo">')).toContain(
+		expect(await render('<img src="assets/logo.png" alt="logo">')).toContain(
 			'src="/ada.test/infra/raw/main/assets/logo.png"'
 		);
 	});
 
-	it("rewrites every candidate in a srcset", () => {
-		const html = render('<picture><source srcset="a.png 1x, b.png 2x"></picture>');
+	it("rewrites every candidate in a srcset", async () => {
+		const html = await render('<picture><source srcset="a.png 1x, b.png 2x"></picture>');
 		expect(html).toContain(
 			'srcset="/ada.test/infra/raw/main/a.png 1x, /ada.test/infra/raw/main/b.png 2x"'
 		);
 	});
 
-	it("leaves off-site images alone when there is no camo", () => {
-		expect(render("![x](https://example.com/a.png)")).toContain(
+	it("leaves off-site images alone when there is no camo", async () => {
+		expect(await render("![x](https://example.com/a.png)")).toContain(
 			'src="https://example.com/a.png"'
 		);
 	});
@@ -92,111 +94,143 @@ describe("renderMarkdown", () => {
 		// hex of https://example.com/a.png, which is what camo signs
 		const hex = "68747470733a2f2f6578616d706c652e636f6d2f612e706e67";
 
-		it("sends an off-site image to the route that signs for camo", () => {
-			expect(camo("![x](https://example.com/a.png)")).toContain(`src="/camo/${hex}"`);
+		it("sends an off-site image to the route that signs for camo", async () => {
+			expect(await camo("![x](https://example.com/a.png)")).toContain(`src="/camo/${hex}"`);
 		});
 
-		it("proxies raw html images and srcset candidates too", () => {
-			expect(camo('<img src="https://example.com/a.png">')).toContain(`src="/camo/${hex}"`);
-			expect(camo('<source srcset="https://example.com/a.png 2x">')).toContain(
+		it("proxies raw html images and srcset candidates too", async () => {
+			expect(await camo('<img src="https://example.com/a.png">')).toContain(
+				`src="/camo/${hex}"`
+			);
+			expect(await camo('<source srcset="https://example.com/a.png 2x">')).toContain(
 				`srcset="/camo/${hex} 2x"`
 			);
 		});
 
-		it("leaves our own images and repo files direct", () => {
-			expect(camo("![x](https://tangled.org/a.png)")).toContain(
+		it("leaves our own images and repo files direct", async () => {
+			expect(await camo("![x](https://tangled.org/a.png)")).toContain(
 				'src="https://tangled.org/a.png"'
 			);
-			expect(camo("![x](assets/a.png)")).toContain(
+			expect(await camo("![x](assets/a.png)")).toContain(
 				'src="/ada.test/infra/raw/main/assets/a.png"'
 			);
 		});
 
-		it("does not proxy links, only what the page loads by itself", () => {
-			expect(camo("[x](https://example.com/a.png)")).toContain(
+		it("does not proxy links, only what the page loads by itself", async () => {
+			expect(await camo("[x](https://example.com/a.png)")).toContain(
 				'href="https://example.com/a.png"'
 			);
 		});
 	});
 
-	it("links a bare handle to its profile", () => {
-		const html = render("thanks @ada.test for the fix");
+	it("links a bare handle to its profile", async () => {
+		const html = await render("thanks @ada.test for the fix");
 		expect(html).toContain('<a href="/ada.test" class="mention">@ada.test</a>');
 	});
 
-	it("leaves a handle inside a link label as text", () => {
-		expect(render("[ask @ada.test](https://example.com)")).not.toContain("mention");
+	it("leaves a handle inside a link label as text", async () => {
+		expect(await render("[ask @ada.test](https://example.com)")).not.toContain("mention");
 	});
 
-	it("does not read an email address as a mention", () => {
-		expect(render("mail ada@ada.test now")).not.toContain("mention");
+	it("does not read an email address as a mention", async () => {
+		expect(await render("mail ada@ada.test now")).not.toContain("mention");
 	});
 
-	it("shortens our own commit urls to a sha", () => {
+	it("shortens our own commit urls to a sha", async () => {
 		const url =
 			"https://tangled.org/ada.test/infra/commit/0c4d0e9b07940033721395a434b5873f0fb9e6c8";
-		expect(render(url)).toContain("<code>0c4d0e9b</code>");
+		expect(await render(url)).toContain("<code>0c4d0e9b</code>");
 	});
 
-	it("leaves a commit url that has its own label", () => {
-		const html = render(
+	it("leaves a commit url that has its own label", async () => {
+		const html = await render(
 			"[the fix](https://tangled.org/ada.test/infra/commit/0c4d0e9b07940033721395a434b5873f0fb9e6c8)"
 		);
 		expect(html).toContain("the fix");
 		expect(html).not.toContain("<code>");
 	});
 
-	it("leaves another host's commit urls as urls", () => {
+	it("leaves another host's commit urls as urls", async () => {
 		const url = "https://github.com/ada/infra/commit/0c4d0e9b07940033721395a434b5873f0fb9e6c8";
-		expect(render(url)).not.toContain("<code>");
+		expect(await render(url)).not.toContain("<code>");
 	});
 
-	it("renders task lists as disabled checkboxes", () => {
-		const html = render("- [x] done\n- [ ] not");
+	it("renders task lists as disabled checkboxes", async () => {
+		const html = await render("- [x] done\n- [ ] not");
 		expect(html).toContain('type="checkbox"');
 		expect(html).toContain('checked="checked"');
 		expect(html).toContain('disabled="disabled"');
 	});
 
-	it("renders footnotes with their backlinks", () => {
-		const html = render("a claim[^1]\n\n[^1]: the source");
+	it("renders footnotes with their backlinks", async () => {
+		const html = await render("a claim[^1]\n\n[^1]: the source");
 		expect(html).toContain('class="footnote-ref"');
 		expect(html).toContain('class="footnote-backref"');
 		expect(html).toContain("the source");
 	});
 
-	it("renders github style alerts", () => {
-		const html = render("> [!WARNING]\n> careful");
+	it("renders github style alerts", async () => {
+		const html = await render("> [!WARNING]\n> careful");
 		expect(html).toContain('class="markdown-alert markdown-alert-warning"');
 		expect(html).toContain("careful");
 	});
 
-	it("renders emoji shortcodes", () => {
-		expect(render("ship it :tada:")).toContain("🎉");
+	it("renders emoji shortcodes", async () => {
+		expect(await render("ship it :tada:")).toContain("🎉");
+	});
+
+	it("keeps the language on a fenced block", async () => {
+		expect(await render("```rust\nfn main() {}\n```")).toContain('class="language-rust"');
+	});
+
+	it("highlights a fenced block but keeps its language class", async () => {
+		const html = await render("```rust\nfn main() {}\n```");
+		expect(html).toContain('class="language-rust"');
+		expect(html).toContain("--diffs-token-");
+		expect(html).toContain("<span");
 	});
 
-	it("keeps the language on a fenced block", () => {
-		expect(render("```rust\nfn main() {}\n```")).toContain('class="language-rust"');
+	it("leaves fenced blocks without a known language plain", async () => {
+		const unknown = await render("```nosuchlang\nhello\n```");
+		expect(unknown).toContain('class="language-nosuchlang"');
+		expect(unknown).not.toContain("--diffs-token-");
+
+		const plain = await render("```\nhello\n```");
+		expect(plain).not.toContain("--diffs-token-");
+	});
+
+	it("leaves oversized blocks plain for the client instead of stalling ssr", async () => {
+		const html = await render("```rust\n" + "x".repeat(60_000) + "\n```");
+		expect(html).toContain('class="language-rust"');
+		expect(html).not.toContain("--diffs-token-");
 	});
 
-	it("strips scripts, event handlers and javascript urls", () => {
-		expect(render("<script>alert(1)</script>")).not.toContain("alert");
-		expect(render('<img src="x" onerror="alert(1)">')).not.toContain("onerror");
+	it("does not let highlighted code smuggle styles past the sanitizer", async () => {
+		const html = await render("```rust\nfn main() {}\n```");
+		expect(html).not.toContain("background-color");
+		expect(html).not.toContain("shiki");
+	});
+
+	it("strips scripts, event handlers and javascript urls", async () => {
+		expect(await render("<script>alert(1)</script>")).not.toContain("alert");
+		expect(await render('<img src="x" onerror="alert(1)">')).not.toContain("onerror");
 		// markdown-it refuses the destination outright, so this stays plain text
-		expect(render("[x](javascript:alert(1))")).not.toContain("<a");
-		expect(render('<a href="data:text/html,hi">x</a>')).not.toContain("data:");
+		expect(await render("[x](javascript:alert(1))")).not.toContain("<a");
+		expect(await render('<a href="data:text/html,hi">x</a>')).not.toContain("data:");
 	});
 
-	it("drops classes it does not recognise", () => {
-		expect(render('<div class="fixed inset-0 bg-black">boo</div>')).not.toContain("inset-0");
+	it("drops classes it does not recognise", async () => {
+		expect(await render('<div class="fixed inset-0 bg-black">boo</div>')).not.toContain(
+			"inset-0"
+		);
 	});
 
-	it("drops inputs that are not task list checkboxes", () => {
-		expect(render('<input type="password" name="p">')).not.toContain("<input");
+	it("drops inputs that are not task list checkboxes", async () => {
+		expect(await render('<input type="password" name="p">')).not.toContain("<input");
 	});
 
-	it("keeps the html a readme actually uses for layout", () => {
-		const html = render(
+	it("keeps the html a readme actually uses for layout", async () => {
+		const html = await render(
 			'<div align="center"><h1>infra</h1></div>\n\n<details><summary>more</summary>\n\nhidden\n\n</details>'
 		);
 		expect(html).toContain('<div align="center">');
diff --git a/web/src/lib/markup/markdown.ts b/web/src/lib/markup/markdown.ts
index 6370501bb..5135effdb 100644
--- a/web/src/lib/markup/markdown.ts
+++ b/web/src/lib/markup/markdown.ts
@@ -4,6 +4,7 @@ import { tasklist } from "@mdit/plugin-tasklist";
 import MarkdownIt from "markdown-it";
 import anchor from "markdown-it-anchor";
 import { full as emoji } from "markdown-it-emoji";
+import { highlightCodeblocks } from "$lib/markup/highlight";
 import { sanitizeMarkup } from "$lib/markup/sanitize";
 import type { MarkupContext } from "$lib/markup/paths";
 
@@ -86,8 +87,8 @@ const commitLinks =
 		});
 	};
 
-// todo: no syntax highlighting, mermaid or math yet. the first two want a client
-// side renderer, math wants mathjax loaded on demand the way the appview does it
+// todo: mermaid and math still want a client side renderer, math wants mathjax
+// loaded on demand the way the appview does it
 const build = (host: string): MarkdownIt => {
 	const md = new MarkdownIt({
 		html: true,
@@ -121,5 +122,8 @@ const rendererFor = (host: string): MarkdownIt => {
 	return md;
 };
 
-export const renderMarkdown = (source: string, ctx: MarkupContext): string =>
-	sanitizeMarkup(rendererFor(ctx.host ?? "").render(source), ctx);
+export const renderMarkdown = async (source: string, ctx: MarkupContext): Promise<string> => {
+	const raw = rendererFor(ctx.host ?? "").render(source);
+	// sanitize before highlighting so the allowlist doesn't have to allow spans
+	return highlightCodeblocks(sanitizeMarkup(raw, ctx));
+};
diff --git a/web/src/pierre.css b/web/src/pierre.css
index 3c066e183..f5af618fc 100644
--- a/web/src/pierre.css
+++ b/web/src/pierre.css
@@ -1,14 +1,30 @@
+:root {
+	/* the "tangled" theme (pierre.ts) binds --diffs-bg/--diffs-fg to these and
+	   forces color-scheme: dark. without them the bg chain goes
+	   guaranteed-invalid and light-dark() is stuck on the dark branch */
+	--diffs-background: var(--color-background-default);
+	--diffs-foreground: var(--color-syntax-foreground);
+
+	--diffs-token-comment: var(--color-syntax-comment);
+	--diffs-token-string: var(--color-syntax-string);
+	--diffs-token-string-expression: var(--color-syntax-string);
+	--diffs-token-keyword: var(--color-syntax-keyword);
+	--diffs-token-function: var(--color-syntax-function);
+	--diffs-token-constant: var(--color-syntax-constant);
+	--diffs-token-parameter: var(--color-syntax-parameter);
+	--diffs-token-punctuation: var(--color-syntax-punctuation);
+	--diffs-token-link: var(--color-syntax-link);
+	--diffs-token-inserted: var(--color-syntax-inserted);
+	--diffs-token-deleted: var(--color-syntax-deleted);
+	--diffs-token-changed: var(--color-syntax-changed);
+}
+
 /* Override Pierre's unlayered :host stylesheet using unlayered :root diffs-container. */
 
 :root diffs-container {
 	--diffs-font-family: var(--font-mono);
 	--diffs-font-size: 0.875rem;
 	--diffs-line-height: 1.5;
-	/* the "tangled" theme (pierre.ts) binds --diffs-bg/--diffs-fg to these and
-	   forces color-scheme: dark. without them the bg chain goes
-	   guaranteed-invalid and light-dark() is stuck on the dark branch */
-	--diffs-background: var(--color-background-default);
-	--diffs-foreground: #4c4f69;
 	color-scheme: light dark;
 	--diffs-light-bg: var(--color-background-default);
 	--diffs-dark-bg: var(--color-background-default);
@@ -24,20 +40,6 @@
 	--diffs-deletion-color-override: var(--color-foreground-danger);
 
 	--diffs-editor-selection-bg: color-mix(in srgb, Highlight 50%, transparent);
-
-	/* syntax palette — catppuccin latte */
-	--diffs-token-comment: #7c7f93; /* overlay2 */
-	--diffs-token-string: #40a02b; /* green */
-	--diffs-token-string-expression: #40a02b; /* green */
-	--diffs-token-keyword: #8839ef; /* mauve */
-	--diffs-token-function: #1e66f5; /* blue */
-	--diffs-token-constant: #fe640b; /* peach */
-	--diffs-token-parameter: #e64553; /* maroon */
-	--diffs-token-punctuation: #7c7f93; /* overlay2 */
-	--diffs-token-link: #1e66f5; /* blue */
-	--diffs-token-inserted: #40a02b; /* green */
-	--diffs-token-deleted: #d20f39; /* red */
-	--diffs-token-changed: #df8e1d; /* yellow */
 }
 
 /* a card whose hunks are still on the wire has pierre's reserved height and
@@ -77,22 +79,5 @@
 
 		--diffs-bg-gutter: var(--color-background-default);
 		--diffs-bg-gutter-wash: var(--color-alpha-dark-5);
-
-		/* catppuccin mocha text (background stays on the app token) */
-		--diffs-foreground: #cdd6f4;
-
-		/* syntax palette — catppuccin mocha */
-		--diffs-token-comment: #9399b2; /* overlay2 */
-		--diffs-token-string: #a6e3a1; /* green */
-		--diffs-token-string-expression: #a6e3a1; /* green */
-		--diffs-token-keyword: #cba6f7; /* mauve */
-		--diffs-token-function: #89b4fa; /* blue */
-		--diffs-token-constant: #fab387; /* peach */
-		--diffs-token-parameter: #eba0ac; /* maroon */
-		--diffs-token-punctuation: #9399b2; /* overlay2 */
-		--diffs-token-link: #89b4fa; /* blue */
-		--diffs-token-inserted: #a6e3a1; /* green */
-		--diffs-token-deleted: #f38ba8; /* red */
-		--diffs-token-changed: #f9e2af; /* yellow */
 	}
 }