diff --git a/astro.config.ts b/astro.config.ts
index e24f445..9371b6d 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -4,11 +4,20 @@ import mdx from "@astrojs/mdx";
 import solidJs from "@astrojs/solid-js";
 import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "astro/config";
+import { createCssVariablesTheme } from "shiki";
+
+// Colors come from the --astro-code-* variables in global.css, shared with highlight.js.
+const codeTheme = createCssVariablesTheme({ variablePrefix: "--astro-code-" });
+// The stock theme paints HTML tag names like quoted strings, so `<script type="module">` reads as one color.
+codeTheme.tokenColors?.push({ scope: "entity.name.tag", settings: { foreground: "var(--astro-code-token-keyword)" } });
 
 // https://astro.build/config
 export default defineConfig({
 	site: "https://moq.dev",
 	output: "static",
+	markdown: {
+		shikiConfig: { theme: codeTheme },
+	},
 	integrations: [mdx(), solidJs()],
 	vite: {
 		plugins: [tailwindcss()],
diff --git a/bun.lock b/bun.lock
index 2b61a9b..4cf37b2 100644
--- a/bun.lock
+++ b/bun.lock
@@ -23,6 +23,7 @@
         "@tailwindcss/vite": "^4.3.3",
         "@types/bun": "^1.4.3",
         "@types/node": "^26.6.5",
+        "shiki": "^4.5.0",
         "tailwindcss": "^4.3.3",
         "typescript": "^7.0.2",
         "vite": "^8.3.4",
@@ -940,7 +941,7 @@
 
     "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
 
-    "yaml": ["yaml@2.8.2", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A=="],
+    "yaml": ["yaml@2.9.1", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-3NxN8+78OdzbT7C/WjGsyfPAtJaN3FNDsWxv7Y7mcDsT/oOmgW8BpyQQFFBnvZE3j9Y2Sdz1ULFLezL7Eb2yFw=="],
 
     "yargs-parser": ["yargs-parser@22.0.0", "", {}, "sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw=="],
 
@@ -958,8 +959,6 @@
 
     "@astrojs/compiler-binding-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.11.3", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA=="],
 
-    "@astrojs/internal-helpers/yaml": ["yaml@2.9.1", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-3NxN8+78OdzbT7C/WjGsyfPAtJaN3FNDsWxv7Y7mcDsT/oOmgW8BpyQQFFBnvZE3j9Y2Sdz1ULFLezL7Eb2yFw=="],
-
     "@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
 
     "@babel/core/@babel/parser": ["@babel/parser@7.28.5", "", { "dependencies": { "@babel/types": "^7.28.5" }, "bin": "./bin/babel-parser.js" }, "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ=="],
diff --git a/package.json b/package.json
index 75da2f6..da15bcd 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
 		"@tailwindcss/vite": "^4.3.3",
 		"@types/bun": "^1.4.3",
 		"@types/node": "^26.6.5",
+		"shiki": "^4.5.0",
 		"tailwindcss": "^4.3.3",
 		"typescript": "^7.0.2",
 		"vite": "^8.3.4",
diff --git a/src/layouts/global.astro b/src/layouts/global.astro
index 3b552c7..4aa8b35 100644
--- a/src/layouts/global.astro
+++ b/src/layouts/global.astro
@@ -1,8 +1,5 @@
 ---
 import "./global.css";
-// Imported after global.css so the theme's .hljs-* color rules land later in
-// the cascade and beat the prose plugin's .markdown :where(pre code) { color: inherit }.
-import "highlight.js/styles/atom-one-dark.css";
 
 // NOTE: This is magically used as the type for Astro.props
 interface Props {
diff --git a/src/layouts/global.css b/src/layouts/global.css
index 134b9bd..7dd5adc 100644
--- a/src/layouts/global.css
+++ b/src/layouts/global.css
@@ -57,12 +57,49 @@ table td:first-child {
 	text-align: right;
 }
 
-/* highlight.js's atom-one-dark theme paints its own background on code.hljs,
-   which double-stacks with the prose plugin's pre background. Strip it. */
-code.hljs,
-pre code.hljs {
-	background: transparent;
-	padding: 0;
+/* One syntax palette for both highlighters: Shiki's MDX blocks reference these
+   variables (see astro.config.ts), and the .hljs-* rules below map highlight.js's
+   client-side embeds onto the same colors. */
+:root {
+	--astro-code-foreground: #e2e8f0; /* slate-200 */
+	--astro-code-background: #020617; /* slate-950 */
+	--astro-code-token-keyword: #4ade80; /* green-400 */
+	--astro-code-token-string: #fde68a; /* amber-200 */
+	--astro-code-token-string-expression: #fde68a; /* amber-200 */
+	--astro-code-token-constant: #7dd3fc; /* sky-300 */
+	--astro-code-token-function: #c4b5fd; /* violet-300 */
+	--astro-code-token-parameter: #e2e8f0; /* slate-200 */
+	--astro-code-token-punctuation: #94a3b8; /* slate-400 */
+	--astro-code-token-comment: #64748b; /* slate-500 */
+	--astro-code-token-link: #4ade80; /* green-400 */
+}
+
+/* Unlayered so they beat the typography plugin's `pre code { color: inherit }`. */
+.hljs {
+	color: var(--astro-code-foreground);
+}
+.hljs-keyword,
+.hljs-built_in,
+.hljs-name {
+	color: var(--astro-code-token-keyword);
+}
+.hljs-string {
+	color: var(--astro-code-token-string);
+}
+.hljs-number,
+.hljs-literal {
+	color: var(--astro-code-token-constant);
+}
+.hljs-title,
+.hljs-attr {
+	color: var(--astro-code-token-function);
+}
+.hljs-tag,
+.hljs-punctuation {
+	color: var(--astro-code-token-punctuation);
+}
+.hljs-comment {
+	color: var(--astro-code-token-comment);
 }
 
 @utility display {
@@ -201,7 +238,7 @@ pre code.hljs {
 	--tw-prose-kbd-shadows: var(--color-white);
 	--tw-prose-code: var(--color-white);
 	--tw-prose-pre-code: var(--color-slate-300);
-	--tw-prose-pre-bg: rgb(0 0 0 / 50%);
+	--tw-prose-pre-bg: var(--astro-code-background);
 	--tw-prose-th-borders: var(--color-slate-600);
 	--tw-prose-td-borders: var(--color-slate-700);
 }
@@ -220,14 +257,25 @@ pre code.hljs {
 	@apply prose-img:rounded-xl;
 	@apply prose-figure:object-center prose-figure:text-center prose-img:m-auto;
 	@apply prose-a:font-semibold prose-a:text-green-500 prose-a:underline prose-a:decoration-green-500/40 prose-a:decoration-2 prose-a:underline-offset-4 prose-a:hover:decoration-green-500;
-	@apply prose-code:font-mono prose-code:text-[0.82em] prose-code:font-normal prose-code:before:content-none prose-code:after:content-none;
-	@apply prose-pre:rounded-xl prose-pre:border prose-pre:border-slate-800 prose-pre:text-[0.82rem];
+	@apply prose-code:font-mono prose-code:font-normal prose-code:before:content-none prose-code:after:content-none;
+	@apply prose-pre:rounded-xl prose-pre:border prose-pre:border-slate-800 prose-pre:text-[0.875rem];
 
 	/* Long URLs and inline `code` shouldn't push the page wider than the viewport. */
 	@apply wrap-break-word;
 
 	& :where(code):not(:where(pre *)) {
-		@apply rounded-sm bg-slate-800 px-1.5 py-0.5;
+		@apply rounded-sm bg-slate-800 px-1.5 py-0.5 text-[0.82em];
+	}
+
+	& pre {
+		tab-size: 4;
+		scrollbar-width: thin;
+		scrollbar-color: var(--color-slate-700) transparent;
+	}
+	/* prose-lg sizes every `code` at 0.89em, which would shrink block code a
+	   second time on top of the pre's own size. */
+	& pre code {
+		font-size: inherit;
 	}
 
 	/* Wide tables scroll on their own instead of widening the page. `display: block`