diff --git a/app/components/ApiCodeSamples.vue b/app/components/ApiCodeSamples.vue
new file mode 100644
index 00000000..0f092cac
--- /dev/null
+++ b/app/components/ApiCodeSamples.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core';
+import { getLibraryByLabel, getLibraryByValue, getSampleOptionByLabel } from '~/utils/libraries';
+import type { ApiReferenceCodeSample } from '~/types';
+
+const props = defineProps<{
+	method: string;
+	path: string;
+	// Shiki-highlighted HTML for the auto-generated REST sample, precomputed at build time.
+	restHtml: string;
+	samples?: ApiReferenceCodeSample[];
+}>();
+
+const { library, setLibrary } = useUserPreferences();
+
+interface Sample {
+	label: string;
+	html: string;
+	source: string;
+	icon?: string;
+	libraryValue?: string;
+}
+
+const samples = computed<Sample[]>(() => {
+	const customSamples = props.samples ?? [];
+	const result: Sample[] = [];
+
+	const sdk = customSamples.find(s => getLibraryByLabel(s.label)?.label === 'SDK');
+	if (sdk) {
+		const lib = getLibraryByLabel(sdk.label);
+		result.push({ label: sdk.label, html: sdk.html, source: sdk.source, icon: lib?.icon, libraryValue: lib?.value });
+	}
+
+	const restLib = getLibraryByLabel('REST');
+	result.push({
+		label: 'REST',
+		html: props.restHtml,
+		source: `${props.method.toUpperCase()} ${props.path}`,
+		icon: restLib?.icon,
+		libraryValue: restLib?.value,
+	});
+
+	for (const sample of customSamples) {
+		if (sample === sdk) continue;
+		const lib = getSampleOptionByLabel(sample.label);
+		result.push({ label: sample.label, html: sample.html, source: sample.source, icon: lib?.icon, libraryValue: lib?.value });
+	}
+
+	return result;
+});
+
+const items = computed(() =>
+	samples.value.map(s => ({
+		label: s.label,
+		value: s.libraryValue ?? s.label,
+		icon: s.icon,
+	})),
+);
+
+const fallbackValue = computed(() => items.value[0]?.value ?? '');
+
+const localActive = ref(fallbackValue.value);
+
+const active = computed<string>({
+	get: () => {
+		const current = library.value;
+		if (current && items.value.some(i => i.value === current)) return current;
+		if (items.value.some(i => i.value === localActive.value)) return localActive.value;
+		return fallbackValue.value;
+	},
+	set: (value: string) => {
+		localActive.value = value;
+		const lib = getLibraryByValue(value);
+		if (lib) setLibrary(lib.value);
+	},
+});
+
+const activeSample = computed(() =>
+	samples.value.find(s => (s.libraryValue ?? s.label) === active.value),
+);
+
+const { copy, copied } = useClipboard({ copiedDuring: 2000 });
+</script>
+
+<template>
+	<div class="dark border border-default rounded-md overflow-hidden bg-default">
+		<div class="flex items-center justify-between gap-2 pr-2 border-b border-default bg-elevated">
+			<UTabs
+				v-model="active"
+				:items="items"
+				variant="link"
+				color="primary"
+				size="sm"
+				:content="false"
+				class="min-w-0 grow"
+				:ui="{ list: 'border-b-0 px-3', trigger: 'text-xs' }"
+			/>
+			<UButton
+				:icon="copied ? 'i-material-symbols-check' : 'i-material-symbols-content-copy-outline'"
+				color="neutral"
+				variant="ghost"
+				size="xs"
+				:aria-label="copied ? 'Copied' : 'Copy code'"
+				class="shrink-0"
+				@click="copy(activeSample?.source ?? '')"
+			/>
+		</div>
+		<template v-for="sample of samples" :key="sample.label">
+			<div
+				v-show="active === (sample.libraryValue ?? sample.label)"
+				class="api-request-pre"
+				v-html="sample.html"
+			/>
+		</template>
+	</div>
+</template>
+
+<style>
+/* The code region scrolls on its own if content can't fit, so an overflowing
+   sample never widens the panel, pushes the copy button away, or grows the page
+   taller than the viewport. The background lives here (not on the pre) so it
+   fills the whole scroll area, including space past the wrapped content. */
+.api-request-pre {
+	max-width: 100%;
+	max-height: 400px;
+	overflow: auto;
+	background-color: var(--ui-bg-muted);
+	scrollbar-width: thin;
+	scrollbar-color: var(--ui-border-accented) transparent;
+}
+
+.api-request-pre::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+.api-request-pre::-webkit-scrollbar-thumb {
+	background-color: var(--ui-border-accented);
+	border-radius: 9999px;
+}
+
+.api-request-pre::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.api-request-pre pre.shiki {
+	border: 0 !important;
+	border-radius: 0 !important;
+	margin: 0 !important;
+	padding: 0.75rem 1rem;
+	font-size: 0.75rem;
+	line-height: 1.5;
+	background-color: transparent !important;
+	/* Reflow long lines at whitespace so they wrap instead of scrolling, but
+	   never split inside a token. A single token too wide to fit scrolls
+	   horizontally (via the wrapper's overflow) rather than breaking mid-word. */
+	white-space: pre-wrap;
+	overflow-wrap: normal;
+	word-break: normal;
+}
+
+.api-request-pre pre.shiki span {
+	color: var(--shiki-light);
+	background-color: var(--shiki-light-bg);
+}
+
+.dark .api-request-pre pre.shiki span {
+	color: var(--shiki-dark);
+	background-color: var(--shiki-dark-bg);
+}
+</style>
diff --git a/app/components/ApiEndpoint.vue b/app/components/ApiEndpoint.vue
index 60487fc0..a5300a4b 100644
--- a/app/components/ApiEndpoint.vue
+++ b/app/components/ApiEndpoint.vue
@@ -133,16 +133,17 @@ const statusCodeDescriptions: StatusCodeDescriptions = {
 				</UTabs>
 			</div>
 		</div>
-		<div class="grow sticky top-16 w-full">
-			<MDC
-				v-if="operation['x-codeSamples']?.length"
-				:key="`code-samples-${operation.method}-${operation.path}`"
-				:value="codeSamplesMd(operation)"
+		<div class="grow min-w-0 sticky top-16 w-full">
+			<ApiCodeSamples
+				:method="operation.method"
+				:path="operation.path"
+				:rest-html="operation.restSampleHtml"
+				:samples="operation['x-codeSamples']"
 			/>
-			<MDC
-				v-if="operation.responseExample"
-				:key="`response-example-${operation.method}-${operation.path}`"
-				:value="preMd('json', 'Response Example', operation.responseExample)"
+			<ApiResponseExample
+				v-if="operation.responseExampleHtml"
+				:html="operation.responseExampleHtml"
+				:source="operation.responseExample"
 			/>
 		</div>
 	</UPageBody>
diff --git a/app/components/ApiNav.vue b/app/components/ApiNav.vue
index 58d98501..952af22b 100644
--- a/app/components/ApiNav.vue
+++ b/app/components/ApiNav.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-	<nav class="grow full block pl-4 pr-6 py-3 rounded-md border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm/6 font-mono">
+	<nav class="grow full block pl-4 pr-6 py-3 rounded-md border border-default bg-muted text-muted text-sm/6 font-mono">
 		<ULink
 			v-for="methodObject of operations"
 			:key="methodObject.path"
diff --git a/app/components/ApiResponseExample.vue b/app/components/ApiResponseExample.vue
new file mode 100644
index 00000000..8b98c355
--- /dev/null
+++ b/app/components/ApiResponseExample.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core';
+
+const props = defineProps<{
+	// Shiki-highlighted HTML for the response example, precomputed at build time.
+	html: string;
+	// Raw response example value, used for copy-to-clipboard.
+	source?: unknown;
+}>();
+
+const copyText = computed(() =>
+	typeof props.source === 'string' ? props.source : JSON.stringify(props.source, null, 2),
+);
+
+const { copy, copied } = useClipboard({ copiedDuring: 2000 });
+</script>
+
+<template>
+	<div class="border border-default rounded-md overflow-hidden bg-default mt-4">
+		<div class="flex items-center justify-between gap-2 pl-3 pr-2 py-1 border-b border-default bg-elevated">
+			<span class="font-mono text-xs text-muted">Response Example</span>
+			<UButton
+				:icon="copied ? 'i-material-symbols-check' : 'i-material-symbols-content-copy-outline'"
+				color="neutral"
+				variant="ghost"
+				size="xs"
+				:aria-label="copied ? 'Copied' : 'Copy response'"
+				class="shrink-0"
+				@click="copy(copyText)"
+			/>
+		</div>
+		<div
+			class="api-response-pre"
+			v-html="html"
+		/>
+	</div>
+</template>
+
+<style>
+/* The code region scrolls on its own if content can't fit, so an overflowing
+   example never widens the panel, pushes the copy button away, or grows the page
+   taller than the viewport. The background lives here (not on the pre) so it
+   fills the whole scroll area, including space past the wrapped content. */
+.api-response-pre {
+	max-width: 100%;
+	max-height: 400px;
+	overflow: auto;
+	background-color: var(--ui-bg-muted);
+	scrollbar-width: thin;
+	scrollbar-color: var(--ui-border-accented) transparent;
+}
+
+.api-response-pre::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+.api-response-pre::-webkit-scrollbar-thumb {
+	background-color: var(--ui-border-accented);
+	border-radius: 9999px;
+}
+
+.api-response-pre::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.api-response-pre pre.shiki {
+	border: 0 !important;
+	border-radius: 0 !important;
+	margin: 0 !important;
+	padding: 0.75rem 1rem;
+	font-size: 0.75rem;
+	line-height: 1.5;
+	background-color: transparent !important;
+	/* Reflow long lines at whitespace so they wrap instead of scrolling, but
+	   never split inside a token. A single token too wide to fit scrolls
+	   horizontally (via the wrapper's overflow) rather than breaking mid-word. */
+	white-space: pre-wrap;
+	overflow-wrap: normal;
+	word-break: normal;
+}
+
+/* Response uses the light syntax theme in light mode and the dark theme in
+   dark mode, so it reads as a distinct surface from the dark request panel. */
+.api-response-pre pre.shiki span {
+	color: var(--shiki-light);
+	background-color: var(--shiki-light-bg);
+}
+
+.dark .api-response-pre pre.shiki span {
+	color: var(--shiki-dark);
+	background-color: var(--shiki-dark-bg);
+}
+</style>
diff --git a/app/components/HomePersonalized.vue b/app/components/HomePersonalized.vue
index 93604da0..3f3f8f4e 100644
--- a/app/components/HomePersonalized.vue
+++ b/app/components/HomePersonalized.vue
@@ -11,13 +11,21 @@ const { primary: primaryInstanceUrl } = useInstanceUrls();
 const settings = useSettingsOverlay();
 function openDrawer() { settings.open(); }
 
+// localStorage-backed state (recents, favorites, instance URLs) is only
+// populated on the client, so gate any UI that depends on it until after
+// mount. Server and first client render share the stable default branch,
+// avoiding hydration mismatches.
+const mounted = ref(false);
+
 const showInline = computed(() => onboardingState.value === 'active');
 const showIdleCta = computed(() => onboardingState.value === 'idle');
 
-const resume = computed(() => recents.value[0] ?? null);
-const restRecents = computed(() => recents.value.slice(1, 7));
+const resume = computed(() => mounted.value ? recents.value[0] ?? null : null);
+const restRecents = computed(() => mounted.value ? recents.value.slice(1, 7) : []);
+const favoritesList = computed(() => mounted.value ? favorites.value : []);
 
 const chips = computed(() => {
+	if (!mounted.value) return [];
 	const out: { icon: string; label: string }[] = [];
 	if (framework.value) out.push({ icon: framework.value.icon, label: framework.value.label });
 	if (experience.value) out.push({ icon: experience.value.icon, label: experience.value.label });
@@ -33,14 +41,17 @@ const chips = computed(() => {
 	return out;
 });
 
+// Cookie-backed prefs only — SSR-safe. The instance URL is localStorage-backed
+// and gated separately via the mounted flag.
 const hasAnyPref = computed(() =>
-	Boolean(framework.value || useCase.value || deployment.value || role.value || experience.value || primaryInstanceUrl.value));
+	Boolean(framework.value || useCase.value || deployment.value || role.value || experience.value));
 
 const showPanel = computed(() =>
 	onboardingState.value === 'onboarded'
-	&& (hasAnyPref.value || recents.value.length > 0 || favorites.value.length > 0));
+	&& (hasAnyPref.value || (mounted.value && (recents.value.length > 0 || favorites.value.length > 0))));
 
 onMounted(() => {
+	mounted.value = true;
 	touchCookie();
 });
 
@@ -199,7 +210,7 @@ function relativeTime(ts?: number): string {
 		</div>
 
 		<div
-			v-if="favorites.length || restRecents.length"
+			v-if="favoritesList.length || restRecents.length"
 			class="grid grid-cols-1 divide-y divide-default border-t border-default @min-[48rem]/docs-pane:grid-cols-2 @min-[48rem]/docs-pane:divide-x @min-[48rem]/docs-pane:divide-y-0"
 		>
 			<div class="px-6 pt-5 pb-6">
@@ -210,11 +221,11 @@ function relativeTime(ts?: number): string {
 					Favorites
 				</DocsEyebrow>
 				<ul
-					v-if="favorites.length"
+					v-if="favoritesList.length"
 					class="flex flex-col gap-0.5"
 				>
 					<li
-						v-for="f in favorites.slice(0, 8)"
+						v-for="f in favoritesList.slice(0, 8)"
 						:key="f.path"
 						class="group flex items-center gap-2"
 					>
diff --git a/app/components/LogoDocs.vue b/app/components/LogoDocs.vue
index e18c55a8..9c5f1d1b 100644
--- a/app/components/LogoDocs.vue
+++ b/app/components/LogoDocs.vue
@@ -1,7 +1,3 @@
-<script setup lang="ts">
-const { preference } = useColorMode();
-</script>
-
 <template>
 	<div class="relative h-7 shrink-0">
 	<!-- Mobile: compact mark+wordmark without "docs" -->
@@ -15,7 +11,6 @@ const { preference } = useColorMode();
 	</svg>
 	<!-- Desktop: full logo with "docs" -->
 	<svg
-		:class="preference"
 		viewBox="0 0 262 40"
 		xmlns="http://www.w3.org/2000/svg"
 		class="fill-current text-default dark:text-white h-full w-auto transition-opacity duration-300 opacity-0 sm:opacity-100 pointer-events-none sm:pointer-events-auto absolute sm:static inset-0"
diff --git a/app/pages/api/[tag].vue b/app/pages/api/[tag].vue
index 87fef875..711b5ad0 100644
--- a/app/pages/api/[tag].vue
+++ b/app/pages/api/[tag].vue
@@ -30,7 +30,7 @@ if (!apiReferencePage.value) {
 
 <template>
 	<UPage>
-		<div class="lg:flex gap-10 items-center border-b border-gray-200 dark:border-gray-800 py-7">
+		<div class="lg:flex gap-10 items-center border-b border-default py-7">
 			<UPageHeader
 				:title="tag!.name"
 				:description="tag!.description"
diff --git a/app/types.ts b/app/types.ts
index 31916965..cb04aac1 100644
--- a/app/types.ts
+++ b/app/types.ts
@@ -10,6 +10,8 @@ export interface ApiReferenceCodeSample {
 	label: string;
 	lang: string;
 	source: string;
+	// Shiki-highlighted HTML for `source`, precomputed at build time.
+	html: string;
 }
 
 export interface ApiReferenceParameter {
@@ -40,6 +42,10 @@ export interface ApiReferenceOperation {
 	requestBody: ApiReferenceRequestBody | null;
 	responses: ApiReferenceResponse[];
 	responseExample: unknown | null;
+	// Shiki-highlighted HTML for the response example, precomputed at build time.
+	responseExampleHtml: string | null;
+	// Shiki-highlighted HTML for the auto-generated REST sample (`METHOD /path`).
+	restSampleHtml: string;
 	'x-codeSamples'?: ApiReferenceCodeSample[];
 }
 
diff --git a/app/utils/codeSamplesMd.ts b/app/utils/codeSamplesMd.ts
deleted file mode 100644
index 708efd9c..00000000
--- a/app/utils/codeSamplesMd.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import preMd from '~/utils/preMd';
-import type { ApiReferenceCodeSample } from '~/types';
-
-/**
- * Convert our @directus/openapi x-codeSamples to valid markdown codeblocks.
- * This allows them to be rendered with MDC
- */
-export default function codeSamplesMd(operation: { method: string; path: string; 'x-codeSamples'?: ApiReferenceCodeSample[] }) {
-	let md = '::code-group{sync="api-consumer"}';
-
-	const { method, path } = operation;
-
-	md += `
-\`\`\`http [REST]
-${method.toUpperCase()} ${path}
-\`\`\`
-`;
-
-	const samples = operation['x-codeSamples'] ?? [];
-
-	for (const { lang, source, label } of samples) {
-		md += preMd(lang, label, source);
-	}
-
-	md += '::';
-
-	return md;
-}
diff --git a/app/utils/linguistToShiki.ts b/app/utils/linguistToShiki.ts
deleted file mode 100644
index f12ea79e..00000000
--- a/app/utils/linguistToShiki.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Transform GitHub's Linguist language name to a valid shiki highlighter name.
- *
- * @directus/openapi uses the redocly spec for x-codeSamples, which uses linguist. This util can be used to
- * render code blocks with highlighting from those names
- *
- * @see https://github.com/github-linguist/linguist/blob/main/lib/linguist/popular.yml
- * @see https://github.com/shikijs/textmate-grammars-themes/tree/main/packages/tm-grammars/grammars
- */
-export default function linguistToShiki(linguistLang: string): string {
-	switch (linguistLang) {
-		case 'JavaScript': return 'js';
-		case 'GraphQL': return 'graphql';
-		default: return linguistLang;
-	}
-}
diff --git a/app/utils/preMd.ts b/app/utils/preMd.ts
deleted file mode 100644
index 830b25e0..00000000
--- a/app/utils/preMd.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import linguistToShiki from '~/utils/linguistToShiki';
-
-export default function (lang: string, label: string, source: unknown) {
-	return `
-\`\`\`${linguistToShiki(lang)} [${label}]
-${typeof source === 'string' ? source : JSON.stringify(source, null, 2)}
-\`\`\`
-`;
-}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 10e8b0f7..c356e6ea 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -47,6 +47,7 @@ function loadApiReferencePrerenderRoutes(): string[] {
 
 const typesenseCollection = process.env.TYPESENSE_COLLECTION || resolveBranchTypesenseAlias() || undefined;
 const apiReferencePrerenderRoutes = loadApiReferencePrerenderRoutes();
+const docsApiReferencePrerenderRoutes = apiReferencePrerenderRoutes.map(route => `${BASE_URL}${route}`);
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -190,7 +191,7 @@ export default defineNuxtConfig({
 			asyncContext: true,
 		},
 		prerender: {
-			routes: ['/', '/api', ...apiReferencePrerenderRoutes],
+			routes: ['/', `${BASE_URL}/api`, ...docsApiReferencePrerenderRoutes],
 			crawlLinks: true,
 			ignore: [/^\/docs\/mcp\/deeplink(\?.*)?$/],
 			concurrency: 1,
diff --git a/package.json b/package.json
index 542c5903..fdda7476 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
 		"posthog-js": "1.371.2",
 		"posthog-node": "5.29.7",
 		"sharp": "^0.34.5",
+		"shiki": "4.0.2",
 		"tailwindcss": "^4.2.4",
 		"typesense": "^3.0.6",
 		"ufo": "1.6.3",
@@ -71,7 +72,10 @@
 		"overrides": {
 			"vite": "npm:rolldown-vite@latest",
 			"h3": "1.15.11"
-		}
+		},
+		"onlyBuiltDependencies": [
+			"better-sqlite3"
+		]
 	},
 	"packageManager": "pnpm@10.29.2+sha512.bef43fa759d91fd2da4b319a5a0d13ef7a45bb985a3d7342058470f9d2051a3ba8674e629672654686ef9443ad13a82da2beb9eeb3e0221c87b8154fff9d74b8",
 	"engines": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 10b72eb1..9838c95e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -75,6 +75,9 @@ importers:
       sharp:
         specifier: ^0.34.5
         version: 0.34.5
+      shiki:
+        specifier: 4.0.2
+        version: 4.0.2
       tailwindcss:
         specifier: ^4.2.4
         version: 4.2.4
diff --git a/scripts/generate-api-reference.ts b/scripts/generate-api-reference.ts
index 8c6ef852..380569d2 100644
--- a/scripts/generate-api-reference.ts
+++ b/scripts/generate-api-reference.ts
@@ -1,9 +1,10 @@
-import { existsSync } from 'node:fs';
+import { existsSync, readFileSync } from 'node:fs';
 import { mkdir, readFile, readdir, rm, writeFile } from 'node:fs/promises';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { spec as openapi } from '@directus/openapi';
 import { get } from 'lodash-es';
+import { createHighlighter } from 'shiki';
 import type {
 	OpenAPIObject,
 	OperationObject,
@@ -27,6 +28,43 @@ const root = join(dirname(fileURLToPath(import.meta.url)), '..');
 const outputDir = join(root, 'app/generated/api-reference');
 const tagsDir = join(outputDir, 'tags');
 
+// Reuse the same Directus themes @nuxt/content uses for the rest of the docs.
+const directusLight = JSON.parse(readFileSync(join(root, 'app/assets/shiki/directus-light.json'), 'utf8'));
+const directusDark = JSON.parse(readFileSync(join(root, 'app/assets/shiki/directus-dark.json'), 'utf8'));
+
+// Linguist-style labels from `x-codeSamples` mapped to Shiki language ids.
+const langAliases: Record<string, string> = {
+	javascript: 'js',
+	js: 'js',
+	graphql: 'graphql',
+	http: 'http',
+	json: 'json',
+};
+
+const shikiLangs = [...new Set(Object.values(langAliases))];
+
+function toShikiLang(lang: string): string {
+	return langAliases[lang.toLowerCase()] ?? 'text';
+}
+
+const highlighter = await createHighlighter({
+	themes: [directusLight, directusDark],
+	langs: shikiLangs,
+});
+
+const lightTheme = directusLight.name;
+const darkTheme = directusDark.name;
+
+// Render code to dual-theme HTML once at build time. CSS vars (--shiki-dark*)
+// let the components swap colors for dark mode without re-highlighting.
+function highlight(code: string, lang: string): string {
+	return highlighter.codeToHtml(code, {
+		lang: toShikiLang(lang),
+		themes: { light: lightTheme, dark: darkTheme },
+		defaultColor: false,
+	});
+}
+
 const methods: (keyof PathItemObject)[] = [
 	'get',
 	'put',
@@ -209,7 +247,15 @@ function responseExample(operation: OperationObject): unknown | null {
 }
 
 function apiOperation(path: string, method: keyof PathItemObject, operation: OperationObject): ApiReferenceOperation {
-	const codeSamples = (operation as OperationObject & { 'x-codeSamples'?: ApiReferenceCodeSample[] })['x-codeSamples'];
+	type RawCodeSample = Omit<ApiReferenceCodeSample, 'html'>;
+	const codeSamples = (operation as OperationObject & { 'x-codeSamples'?: RawCodeSample[] })['x-codeSamples'];
+	const highlightedSamples = codeSamples?.map(sample => ({ ...sample, html: highlight(sample.source, sample.lang) }));
+
+	const restSource = `${method.toUpperCase()} ${path}`;
+	const example = responseExample(operation);
+	const responseExampleHtml = example === null
+		? null
+		: highlight(typeof example === 'string' ? example : JSON.stringify(example, null, 2), 'json');
 
 	return {
 		method,
@@ -222,8 +268,10 @@ function apiOperation(path: string, method: keyof PathItemObject, operation: Ope
 			.map(apiParameter),
 		requestBody: requestBodyData(operation),
 		responses: responseData(operation),
-		responseExample: responseExample(operation),
-		...(codeSamples?.length ? { 'x-codeSamples': codeSamples } : {}),
+		responseExample: example,
+		responseExampleHtml,
+		restSampleHtml: highlight(restSource, 'http'),
+		...(highlightedSamples?.length ? { 'x-codeSamples': highlightedSamples } : {}),
 	};
 }