diff --git a/package.json b/package.json
index e37c625..e0fb64f 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "@libsql/client": "^0.18.0",
     "@logan/libsql-search": "jsr:^0.11.1",
     "@radix-ui/react-dialog": "^1.1.23",
+    "@shikijs/langs": "^4.4.3",
     "@tailwindcss/vite": "^4.3.3",
     "astro": "^7.2.10",
     "clsx": "^2.1.1",
@@ -62,6 +63,7 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "sanitize-html": "^2.17.7",
+    "shiki": "^4.4.3",
     "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.3"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 590be10..c38059b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -39,6 +39,9 @@ importers:
       '@radix-ui/react-dialog':
         specifier: ^1.1.23
         version: 1.1.23(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@shikijs/langs':
+        specifier: ^4.4.3
+        version: 4.4.3
       '@tailwindcss/vite':
         specifier: ^4.3.3
         version: 4.3.3(vite@8.2.2(@types/node@26.4.1)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.13))
@@ -69,6 +72,9 @@ importers:
       sanitize-html:
         specifier: ^2.17.7
         version: 2.17.7
+      shiki:
+        specifier: ^4.4.3
+        version: 4.4.3
       tailwind-merge:
         specifier: ^3.6.0
         version: 3.6.0
diff --git a/src/config/themes.ts b/src/config/themes.ts
index e27c7ec..4cc6b05 100644
--- a/src/config/themes.ts
+++ b/src/config/themes.ts
@@ -57,6 +57,21 @@ export interface Theme {
     toc: string;
     tocForeground: string;
     tocBorder: string;
+    // Syntax token colors. These ride the same variable pipeline as every other
+    // token, which is what lets a build-time-highlighted page restyle itself on
+    // a theme switch without being re-highlighted.
+    syntaxComment: string;
+    syntaxKeyword: string;
+    syntaxString: string;
+    syntaxStringExpression: string;
+    syntaxConstant: string;
+    syntaxFunction: string;
+    syntaxParameter: string;
+    syntaxPunctuation: string;
+    syntaxLink: string;
+    syntaxInserted: string;
+    syntaxDeleted: string;
+    syntaxChanged: string;
   };
 }
 
@@ -98,6 +113,18 @@ export const themes: Theme[] = [
       toc: '#262626',
       tocForeground: '#fafafa',
       tocBorder: '#1a1a1a',
+      syntaxComment: '#8b949e',
+      syntaxKeyword: '#ff7b72',
+      syntaxString: '#a5d6ff',
+      syntaxStringExpression: '#a5d6ff',
+      syntaxConstant: '#79c0ff',
+      syntaxFunction: '#d2a8ff',
+      syntaxParameter: '#ffa657',
+      syntaxPunctuation: '#c9d1d9',
+      syntaxLink: '#79c0ff',
+      syntaxInserted: '#3fb950',
+      syntaxDeleted: '#f85149',
+      syntaxChanged: '#d29922',
     },
   },
   {
@@ -137,6 +164,18 @@ export const themes: Theme[] = [
       toc: '#fafafa',
       tocForeground: '#171717',
       tocBorder: '#e5e7eb',
+      syntaxComment: '#6e7781',
+      syntaxKeyword: '#cf222e',
+      syntaxString: '#0a3069',
+      syntaxStringExpression: '#0a3069',
+      syntaxConstant: '#0550ae',
+      syntaxFunction: '#8250df',
+      syntaxParameter: '#953800',
+      syntaxPunctuation: '#24292f',
+      syntaxLink: '#0550ae',
+      syntaxInserted: '#1a7f37',
+      syntaxDeleted: '#cf222e',
+      syntaxChanged: '#9a6700',
     },
   },
   {
@@ -176,6 +215,18 @@ export const themes: Theme[] = [
       toc: '#0f2942',
       tocForeground: '#e0f2fe',
       tocBorder: '#1e3a5f',
+      syntaxComment: '#7f9cb8',
+      syntaxKeyword: '#38bdf8',
+      syntaxString: '#5eead4',
+      syntaxStringExpression: '#5eead4',
+      syntaxConstant: '#a5b4fc',
+      syntaxFunction: '#67e8f9',
+      syntaxParameter: '#fbbf24',
+      syntaxPunctuation: '#bae6fd',
+      syntaxLink: '#38bdf8',
+      syntaxInserted: '#2dd4bf',
+      syntaxDeleted: '#f87171',
+      syntaxChanged: '#fbbf24',
     },
   },
   {
@@ -215,6 +266,18 @@ export const themes: Theme[] = [
       toc: '#14291a',
       tocForeground: '#d1fae5',
       tocBorder: '#1a3d23',
+      syntaxComment: '#7f9e88',
+      syntaxKeyword: '#34d399',
+      syntaxString: '#bef264',
+      syntaxStringExpression: '#bef264',
+      syntaxConstant: '#86efac',
+      syntaxFunction: '#5eead4',
+      syntaxParameter: '#fcd34d',
+      syntaxPunctuation: '#a7f3d0',
+      syntaxLink: '#34d399',
+      syntaxInserted: '#4ade80',
+      syntaxDeleted: '#f87171',
+      syntaxChanged: '#fbbf24',
     },
   },
   {
@@ -254,6 +317,18 @@ export const themes: Theme[] = [
       toc: '#2a1510',
       tocForeground: '#fef3c7',
       tocBorder: '#3d1f15',
+      syntaxComment: '#b08968',
+      syntaxKeyword: '#fb923c',
+      syntaxString: '#fde68a',
+      syntaxStringExpression: '#fde68a',
+      syntaxConstant: '#fca5a5',
+      syntaxFunction: '#fcd34d',
+      syntaxParameter: '#f9a8d4',
+      syntaxPunctuation: '#fed7aa',
+      syntaxLink: '#fb923c',
+      syntaxInserted: '#84cc16',
+      syntaxDeleted: '#ef4444',
+      syntaxChanged: '#fbbf24',
     },
   },
   {
@@ -293,6 +368,18 @@ export const themes: Theme[] = [
       toc: '#241129',
       tocForeground: '#f3e8ff',
       tocBorder: '#2e1a3d',
+      syntaxComment: '#a78bb9',
+      syntaxKeyword: '#c084fc',
+      syntaxString: '#f0abfc',
+      syntaxStringExpression: '#f0abfc',
+      syntaxConstant: '#d8b4fe',
+      syntaxFunction: '#a5b4fc',
+      syntaxParameter: '#fcd34d',
+      syntaxPunctuation: '#e9d5ff',
+      syntaxLink: '#c084fc',
+      syntaxInserted: '#4ade80',
+      syntaxDeleted: '#f472b6',
+      syntaxChanged: '#fbbf24',
     },
   },
 ];
diff --git a/src/lib/codeHighlight.failure.test.ts b/src/lib/codeHighlight.failure.test.ts
new file mode 100644
index 0000000..7f54deb
--- /dev/null
+++ b/src/lib/codeHighlight.failure.test.ts
@@ -0,0 +1,34 @@
+/**
+ * Isolated because it mocks the Shiki core module, which the highlighter
+ * singleton in codeHighlight.ts resolves once per module instance.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+afterEach(() => {
+  vi.doUnmock('shiki/core');
+  vi.resetModules();
+});
+
+describe('highlightCode when the highlighter fails', () => {
+  it('degrades to plain rendering rather than failing the build', async () => {
+    vi.resetModules();
+    vi.doMock('shiki/core', async () => {
+      const actual =
+        await vi.importActual<typeof import('shiki/core')>('shiki/core');
+      return {
+        ...actual,
+        createHighlighterCore: async () => ({
+          codeToHtml: () => {
+            throw new Error('grammar exploded');
+          },
+        }),
+      };
+    });
+
+    const { highlightCode } = await import('./codeHighlight');
+
+    // A thrown highlighter must not fail the build; the code renderer falls
+    // back to a plain block when this returns null.
+    await expect(highlightCode('const a = 1;', 'ts')).resolves.toBeNull();
+  });
+});
diff --git a/src/lib/codeHighlight.test.ts b/src/lib/codeHighlight.test.ts
new file mode 100644
index 0000000..adc5748
--- /dev/null
+++ b/src/lib/codeHighlight.test.ts
@@ -0,0 +1,199 @@
+import { readFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import { logger } from 'logan-logger';
+import { describe, expect, it, vi } from 'vitest';
+import {
+  CODE_LINE_CLASS,
+  CODE_PRE_CLASS,
+  createStyleToClassTransformer,
+  highlightCode,
+  isSupportedLanguage,
+  SYNTAX_TOKEN_CLASSES,
+} from './codeHighlight';
+
+function classNamesIn(html: string): string[] {
+  return [...html.matchAll(/class="([^"]*)"/g)].flatMap((match) =>
+    (match[1] ?? '').split(/\s+/).filter(Boolean),
+  );
+}
+
+describe('isSupportedLanguage', () => {
+  it('should accept bundled grammar names', () => {
+    expect(isSupportedLanguage('typescript')).toBe(true);
+    expect(isSupportedLanguage('python')).toBe(true);
+  });
+
+  it('should accept grammar aliases', () => {
+    expect(isSupportedLanguage('ts')).toBe(true);
+    expect(isSupportedLanguage('js')).toBe(true);
+    expect(isSupportedLanguage('sh')).toBe(true);
+    expect(isSupportedLanguage('md')).toBe(true);
+  });
+
+  it('should normalize case and surrounding whitespace', () => {
+    expect(isSupportedLanguage('  TypeScript ')).toBe(true);
+  });
+
+  it('should reject unbundled languages', () => {
+    expect(isSupportedLanguage('brainfuck')).toBe(false);
+    expect(isSupportedLanguage('')).toBe(false);
+  });
+});
+
+describe('highlightCode', () => {
+  it('should return null when no language is given', async () => {
+    expect(await highlightCode('const a = 1;', undefined)).toBeNull();
+    expect(await highlightCode('const a = 1;', '   ')).toBeNull();
+  });
+
+  it('should return null for an unbundled language', async () => {
+    expect(await highlightCode('x', 'brainfuck')).toBeNull();
+  });
+
+  it('should emit token classes rather than inline styles', async () => {
+    const html = await highlightCode('const x = 1; // note', 'ts');
+    expect(html).not.toBeNull();
+    expect(html).not.toMatch(/style=/);
+    expect(html).toContain('class="sh-keyword"');
+    expect(html).toContain('class="sh-comment"');
+  });
+
+  it('should tag the code element with its language', async () => {
+    const html = await highlightCode('SELECT 1;', 'sql');
+    expect(html).toContain('<code class="language-sql">');
+  });
+
+  it('should drop the tabindex and background style Shiki adds to pre', async () => {
+    const html = await highlightCode('const a = 1;', 'ts');
+    expect(html).toContain('<pre class="shiki">');
+    expect(html).not.toContain('tabindex');
+  });
+
+  it('should escape HTML in the highlighted source', async () => {
+    const html = await highlightCode(
+      'const s = "<script>alert(1)</script>";',
+      'ts',
+    );
+    expect(html).not.toContain('<script>');
+    expect(html).toContain('&#x3C;script>');
+  });
+
+  // The sanitizer allowlist is built from SYNTAX_TOKEN_CLASSES, so a class the
+  // transformer can emit but the list omits would be silently stripped.
+  it('should only emit classes covered by the sanitizer allowlist', async () => {
+    const allowed = new Set<string>([
+      'shiki',
+      CODE_LINE_CLASS,
+      ...SYNTAX_TOKEN_CLASSES,
+    ]);
+    const samples: Array<[string, string]> = [
+      ['typescript', `const f = (a: number) => \`v=\${a}\`; // c`],
+      ['python', 'def f(a):\n    return f"v={a}"  # c'],
+      ['markdown', '# h\n\n*em* and **strong** and [l](https://e.com)'],
+      ['bash', 'echo "hi" # c'],
+      ['json', '{ "a": [1, true, null] }'],
+      ['css', '.a { color: red; /* c */ }'],
+      ['html', '<div class="a">x</div>'],
+      ['go', 'func main() { println("hi") }'],
+      ['rust', 'fn main() { println!("hi"); }'],
+      ['yaml', 'a: 1 # c'],
+      ['diff', '+ added\n- removed'],
+      ['astro', '---\nconst a = 1;\n---\n<p>{a}</p>'],
+    ];
+
+    for (const [lang, code] of samples) {
+      const html = await highlightCode(code, lang);
+      expect(html, `expected ${lang} to highlight`).not.toBeNull();
+      for (const name of classNamesIn(html ?? '')) {
+        if (name.startsWith('language-')) continue;
+        expect(allowed, `unexpected class "${name}" from ${lang}`).toContain(
+          name,
+        );
+      }
+
+      // A variable missing from the class table yields bare spans, which the
+      // allowlist check above accepts happily.
+      const tokenClasses = classNamesIn(html ?? '').filter(
+        (name) =>
+          name !== CODE_LINE_CLASS &&
+          name !== CODE_PRE_CLASS &&
+          !name.startsWith('language-'),
+      );
+      expect(
+        tokenClasses,
+        `${lang} produced no token classes`,
+      ).not.toHaveLength(0);
+    }
+  });
+
+  // The stylesheet is hand-authored and is the one half of the pipeline that
+  // does not derive from SYNTAX_TOKEN_CLASSES, so it can fall behind silently.
+  it('should have a style rule for every token class', async () => {
+    const css = await readFile(
+      resolve(process.cwd(), './src/pages/content/[...slug].astro'),
+      'utf8',
+    );
+
+    for (const name of SYNTAX_TOKEN_CLASSES) {
+      expect(css, `no style rule for .${name}`).toContain(`:global(.${name})`);
+    }
+  });
+});
+
+describe('style-to-class transformer', () => {
+  function spanNode(style: string) {
+    return {
+      type: 'element' as const,
+      tagName: 'span' as const,
+      properties: { style } as Record<string, unknown>,
+      children: [],
+    };
+  }
+
+  // The real handler signature carries line, column and token arguments this
+  // one never reads, so the node is all a caller needs to supply.
+  type SpanHandler = (node: { properties: Record<string, unknown> }) => void;
+
+  function applySpan(style: string) {
+    const transformer = createStyleToClassTransformer();
+    const node = spanNode(style);
+    (transformer.span as unknown as SpanHandler).call(transformer, node);
+    return node.properties;
+  }
+
+  it('maps a known token variable to its class and drops the style', () => {
+    expect(applySpan('color:var(--shiki-token-keyword)')).toEqual({
+      style: undefined,
+      class: 'sh-keyword',
+    });
+  });
+
+  // A Shiki release that adds a token variable must fail to unstyled text
+  // rather than leaking an inline style past a strict style-src.
+  it('drops an unmapped token variable rather than emitting a style', () => {
+    const warn = vi.spyOn(logger, 'warn').mockImplementation(() => {});
+
+    const properties = applySpan('color:var(--shiki-token-invented)');
+
+    expect(properties.style).toBeUndefined();
+    expect(properties.class).toBeUndefined();
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining('Unmapped Shiki token variable'),
+      expect.objectContaining({ variable: '--shiki-token-invented' }),
+    );
+    warn.mockRestore();
+  });
+
+  it('leaves a span with no style untouched', () => {
+    const transformer = createStyleToClassTransformer();
+    const node = {
+      type: 'element' as const,
+      tagName: 'span' as const,
+      properties: {} as Record<string, unknown>,
+      children: [],
+    };
+    (transformer.span as unknown as SpanHandler).call(transformer, node);
+
+    expect(node.properties.class).toBeUndefined();
+  });
+});
diff --git a/src/lib/codeHighlight.ts b/src/lib/codeHighlight.ts
new file mode 100644
index 0000000..ab83e24
--- /dev/null
+++ b/src/lib/codeHighlight.ts
@@ -0,0 +1,195 @@
+import astro from '@shikijs/langs/astro';
+import bash from '@shikijs/langs/bash';
+import css from '@shikijs/langs/css';
+import diff from '@shikijs/langs/diff';
+import go from '@shikijs/langs/go';
+import html from '@shikijs/langs/html';
+import javascript from '@shikijs/langs/javascript';
+import json from '@shikijs/langs/json';
+import jsx from '@shikijs/langs/jsx';
+import markdown from '@shikijs/langs/markdown';
+import python from '@shikijs/langs/python';
+import rust from '@shikijs/langs/rust';
+import sql from '@shikijs/langs/sql';
+import tsx from '@shikijs/langs/tsx';
+import typescript from '@shikijs/langs/typescript';
+import yaml from '@shikijs/langs/yaml';
+import { logger } from 'logan-logger';
+import type {
+  HighlighterCore,
+  LanguageRegistration,
+  ShikiTransformer,
+} from 'shiki/core';
+import { createCssVariablesTheme, createHighlighterCore } from 'shiki/core';
+import { createOnigurumaEngine } from 'shiki/engine/oniguruma';
+
+const THEME_NAME = 'semantic-docs-vars';
+
+// Grammar set is deliberately small. Each entry is a static import, so anything
+// added here is loaded into every build whether or not the content uses it.
+const LANGUAGE_BUNDLES: LanguageRegistration[][] = [
+  astro,
+  bash,
+  css,
+  diff,
+  go,
+  html,
+  javascript,
+  json,
+  jsx,
+  markdown,
+  python,
+  rust,
+  sql,
+  tsx,
+  typescript,
+  yaml,
+];
+
+/** Every grammar name and alias the highlighter can resolve, including embedded ones. */
+const SUPPORTED_LANGUAGES: ReadonlySet<string> = new Set(
+  LANGUAGE_BUNDLES.flatMap((bundle) =>
+    bundle.flatMap((registration) => [
+      registration.name,
+      ...(registration.aliases ?? []),
+    ]),
+  ),
+);
+
+// The css-variables theme resolves every token colour to one of these
+// variables, which is what makes a static style-to-class table possible. The
+// three diff tokens are the whole `diff` grammar; omitting one renders that
+// language's output entirely unstyled rather than failing.
+const TOKEN_CLASS_BY_VARIABLE: Readonly<Record<string, string>> = {
+  '--shiki-foreground': 'sh-text',
+  '--shiki-token-changed': 'sh-changed',
+  '--shiki-token-comment': 'sh-comment',
+  '--shiki-token-constant': 'sh-constant',
+  '--shiki-token-deleted': 'sh-deleted',
+  '--shiki-token-function': 'sh-function',
+  '--shiki-token-inserted': 'sh-inserted',
+  '--shiki-token-keyword': 'sh-keyword',
+  '--shiki-token-link': 'sh-link',
+  '--shiki-token-parameter': 'sh-parameter',
+  '--shiki-token-punctuation': 'sh-punctuation',
+  '--shiki-token-string': 'sh-string',
+  '--shiki-token-string-expression': 'sh-string-expression',
+};
+
+const FONT_CLASS_BY_DECLARATION: Readonly<Record<string, string>> = {
+  'font-style:italic': 'sh-italic',
+  'font-weight:bold': 'sh-bold',
+  'text-decoration:underline': 'sh-underline',
+};
+
+/** Token classes the stylesheet defines and the sanitizer allows on `span`. */
+export const SYNTAX_TOKEN_CLASSES: readonly string[] = [
+  ...Object.values(TOKEN_CLASS_BY_VARIABLE),
+  ...Object.values(FONT_CLASS_BY_DECLARATION),
+];
+
+export const CODE_BLOCK_CLASS = 'code-block';
+export const CODE_PRE_CLASS = 'shiki';
+export const CODE_LINE_CLASS = 'line';
+
+/** Class names produced from a single CSS declaration, or null if unrecognised. */
+function declarationToClass(declaration: string): string | null {
+  const compact = declaration.replace(/\s+/g, '');
+  const fontClass = FONT_CLASS_BY_DECLARATION[compact];
+  if (fontClass) return fontClass;
+
+  const match = /^color:var\((--shiki-[a-z-]+)\)$/.exec(compact);
+  if (!match?.[1]) return null;
+
+  const tokenClass = TOKEN_CLASS_BY_VARIABLE[match[1]];
+  if (!tokenClass) {
+    // A Shiki release that adds a token variable would otherwise render that
+    // token unstyled with nothing to notice at build time.
+    logger.warn('Unmapped Shiki token variable, rendering unstyled', {
+      variable: match[1],
+    });
+    return null;
+  }
+  return tokenClass;
+}
+
+/**
+ * Rewrites Shiki's inline `style` attributes as classes so a `style-src` with no
+ * 'unsafe-inline' can serve the page. Class names are fixed rather than derived
+ * from the style text, so the matching CSS can live in a static stylesheet.
+ */
+export function createStyleToClassTransformer(): ShikiTransformer {
+  return {
+    name: 'semantic-docs:style-to-class',
+    pre(node) {
+      node.properties = { class: CODE_PRE_CLASS };
+    },
+    code(node) {
+      const lang = this.options.lang;
+      node.properties = { class: `language-${lang}` };
+    },
+    span(node) {
+      const style = node.properties.style;
+      node.properties.style = undefined;
+      if (typeof style !== 'string') return;
+
+      const classes = style
+        .split(';')
+        .map(declarationToClass)
+        .filter((name): name is string => name !== null);
+      if (classes.length > 0) node.properties.class = classes.join(' ');
+    },
+  };
+}
+
+const styleToClassTransformer = createStyleToClassTransformer();
+
+let highlighterPromise: Promise<HighlighterCore> | null = null;
+
+/**
+ * Grammar and WASM loading costs a second or so, so the highlighter is built
+ * once per process and shared by every code block in the build.
+ */
+function getHighlighter(): Promise<HighlighterCore> {
+  highlighterPromise ??= createHighlighterCore({
+    themes: [createCssVariablesTheme({ name: THEME_NAME, fontStyle: true })],
+    langs: LANGUAGE_BUNDLES,
+    engine: createOnigurumaEngine(import('shiki/wasm')),
+  });
+  return highlighterPromise;
+}
+
+export function isSupportedLanguage(lang: string): boolean {
+  return SUPPORTED_LANGUAGES.has(normalizeLanguage(lang));
+}
+
+function normalizeLanguage(lang: string): string {
+  return lang.trim().toLowerCase().split(/\s+/)[0] ?? '';
+}
+
+/**
+ * Highlighted `<pre>` markup for a fenced block, or null when the language is
+ * absent or unbundled so the caller can fall back to plain rendering.
+ */
+export async function highlightCode(
+  code: string,
+  lang: string | undefined,
+): Promise<string | null> {
+  const normalized = normalizeLanguage(lang ?? '');
+  if (!normalized || !SUPPORTED_LANGUAGES.has(normalized)) return null;
+
+  try {
+    const highlighter = await getHighlighter();
+    return highlighter.codeToHtml(code, {
+      lang: normalized,
+      theme: THEME_NAME,
+      transformers: [styleToClassTransformer],
+    });
+  } catch (error) {
+    logger.warn('Syntax highlighting failed, rendering plain code block', {
+      lang: normalized,
+      error,
+    });
+    return null;
+  }
+}
diff --git a/src/lib/markdown.test.ts b/src/lib/markdown.test.ts
index da163b1..9bdd1bc 100644
--- a/src/lib/markdown.test.ts
+++ b/src/lib/markdown.test.ts
@@ -187,4 +187,104 @@ describe('marked', () => {
       expect(result).toContain('<blockquote>');
     });
   });
+
+  describe('syntax highlighting', () => {
+    it('should highlight a fenced block with a known language', async () => {
+      const result = await marked('```ts\nconst x = 1; // note\n```');
+      expect(result).toContain('<div class="code-block">');
+      expect(result).toContain('<pre class="shiki">');
+      expect(result).toContain('<code class="language-ts">');
+      expect(result).toContain('class="sh-keyword"');
+      expect(result).toContain('class="sh-comment"');
+    });
+
+    it('should resolve language aliases', async () => {
+      const result = await marked('```sh\necho hi\n```');
+      expect(result).toContain('class="language-sh"');
+      expect(result).toContain('class="sh-');
+    });
+
+    it('should fall back to plain rendering for an unknown language', async () => {
+      const result = await marked('```brainfuck\n+++.\n```');
+      expect(result).toContain('<pre><code class="language-brainfuck">');
+      expect(result).not.toContain('class="sh-');
+    });
+
+    it('should fall back to plain rendering for an unfenced-language block', async () => {
+      const result = await marked('```\njust text\n```');
+      expect(result).toContain('<pre><code>just text');
+      expect(result).not.toContain('class="sh-');
+    });
+
+    it('should still wrap plain blocks so they get a copy button', async () => {
+      const result = await marked('```\njust text\n```');
+      expect(result).toContain('<div class="code-block">');
+    });
+
+    it('should escape HTML inside a highlighted block', async () => {
+      const result = await marked(
+        '```ts\nconst s = "<img src=x onerror=alert(1)>";\n```',
+      );
+      // The attribute text survives as escaped content, which is the point:
+      // it is displayed, never parsed as markup.
+      expect(result).not.toContain('<img');
+      expect(result).toContain('&lt;img src=x onerror=alert(1)&gt;');
+    });
+
+    it('should escape HTML inside a plain block', async () => {
+      const result = await marked('```\n<script>alert(1)</script>\n```');
+      expect(result).not.toContain('<script');
+      expect(result).toContain('&lt;script');
+    });
+
+    it('should not emit a language class for a malformed fence info string', async () => {
+      const result = await marked('```<script>\nx\n```');
+      expect(result).not.toContain('<script');
+      expect(result).not.toContain('class="language-');
+    });
+  });
+
+  describe('class and style sanitization', () => {
+    it('should not let any inline style attribute survive', async () => {
+      const result = await marked(
+        [
+          '```ts',
+          'const x: number = 1; // note',
+          '```',
+          '',
+          '```python',
+          'def f(a):\n    return f"v={a}"',
+          '```',
+          '',
+          '<p style="color:red">styled</p>',
+          '',
+          '<span style="color:red" class="sh-keyword">also styled</span>',
+        ].join('\n'),
+      );
+      expect(result).not.toMatch(/style\s*=/);
+    });
+
+    it('should strip classes that are not on the allowlist', async () => {
+      const result = await marked(
+        '<div class="code-block evil"><span class="sh-keyword nope">x</span></div>',
+      );
+      expect(result).toContain('class="code-block"');
+      expect(result).toContain('class="sh-keyword"');
+      expect(result).not.toContain('evil');
+      expect(result).not.toContain('nope');
+    });
+
+    it('should strip classes from tags that allow none', async () => {
+      const result = await marked('<p class="sh-keyword">x</p>');
+      expect(result).toContain('<p>x</p>');
+    });
+
+    it('should reject a language class that is not a plain language name', async () => {
+      const result = await marked(
+        '<code class="language-ts">ok</code> <code class="language- bad">no</code>',
+      );
+      expect(result).toContain('<code class="language-ts">');
+      expect(result).not.toContain('bad');
+    });
+  });
 });
diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts
index b8f40c8..a3ebc54 100644
--- a/src/lib/markdown.ts
+++ b/src/lib/markdown.ts
@@ -1,5 +1,12 @@
-import { Marked } from 'marked';
+import { Marked, type Tokens } from 'marked';
 import sanitizeHtml from 'sanitize-html';
+import {
+  CODE_BLOCK_CLASS,
+  CODE_LINE_CLASS,
+  CODE_PRE_CLASS,
+  highlightCode,
+  SYNTAX_TOKEN_CLASSES,
+} from './codeHighlight';
 import { slugify } from './utils';
 
 // Allowlist of URL schemes considered safe to emit in href/src attributes.
@@ -37,6 +44,27 @@ function escapeHtml(text: string): string {
   return text.replace(/[&<>"']/g, (char) => htmlEscapes[char]);
 }
 
+/** marked's own fence class, e.g. `language-ts`, kept on both render paths. */
+const LANGUAGE_CLASS_PATTERN = /^language-[a-z0-9][a-z0-9+#._-]*$/i;
+
+/**
+ * The unhighlighted `<pre><code>` fallback, matching marked's default output.
+ * Reimplemented rather than delegated so every block, highlighted or not, gets
+ * the same wrapper and therefore the same copy button.
+ */
+function plainCodeBlock(token: Tokens.Code): string {
+  const lang = token.lang?.trim().split(/\s+/)[0] ?? '';
+  const className = `language-${lang}`;
+  const classAttr = LANGUAGE_CLASS_PATTERN.test(className)
+    ? ` class="${className}"`
+    : '';
+  // Matching marked's own trailing-newline handling: an indented block keeps
+  // its final newline in the token, so emitting one unconditionally leaves a
+  // blank line that the copy button then copies.
+  const text = escapeHtml(token.text.replace(/\n$/, ''));
+  return `<pre><code${classAttr}>${text}\n</code></pre>`;
+}
+
 /**
  * Builds a parser for a single document. The instance is per-call because the
  * heading slugger carries state, and sharing it across documents would number
@@ -44,9 +72,23 @@ function escapeHtml(text: string): string {
  */
 function createParser(): Marked {
   const usedIds = new Set<string>();
+  // Highlighting is async but marked's renderers are not, so walkTokens does the
+  // work up front and parks it here for the sync `code` renderer. The key type is
+  // a union because walkTokens narrows a code token only as far as Code | Generic.
+  const highlighted = new WeakMap<Tokens.Code | Tokens.Generic, string>();
 
   return new Marked({
+    async: true,
+    async walkTokens(token) {
+      if (token.type !== 'code') return;
+      const html = await highlightCode(token.text, token.lang);
+      if (html) highlighted.set(token, html);
+    },
     renderer: {
+      code(token) {
+        const inner = highlighted.get(token) ?? plainCodeBlock(token);
+        return `<div class="${CODE_BLOCK_CLASS}">${inner}</div>`;
+      },
       heading({ tokens, depth }) {
         // Slug the plain text, not the rendered inline HTML: otherwise a
         // heading containing code or a link folds tag names into its id
@@ -131,9 +173,14 @@ const sanitizeOptions: sanitizeHtml.IOptions = {
     h4: ['id'],
     h5: ['id'],
     h6: ['id'],
-    code: ['class'],
-    pre: ['class'],
-    '*': ['class'], // Allow class on any element for styling
+  },
+  // `class` is carried by allowedClasses rather than allowedAttributes: an
+  // allowlisted tag keeps only the class names named here and loses the rest.
+  allowedClasses: {
+    div: [CODE_BLOCK_CLASS],
+    pre: [CODE_PRE_CLASS],
+    code: [LANGUAGE_CLASS_PATTERN],
+    span: [CODE_LINE_CLASS, ...SYNTAX_TOKEN_CLASSES],
   },
   allowedSchemes: ['http', 'https', 'mailto', 'tel'],
   allowedSchemesByTag: {
diff --git a/src/pages/content/[...slug].astro b/src/pages/content/[...slug].astro
index 99ba1f7..dbeb260 100644
--- a/src/pages/content/[...slug].astro
+++ b/src/pages/content/[...slug].astro
@@ -190,6 +190,97 @@ const tags = article.tags;
     font-size: 0.875rem;
   }
 
+  .article-content :global(.code-block) {
+    position: relative;
+    margin: 1.5rem 0;
+  }
+
+  .article-content :global(.code-block pre) {
+    margin: 0;
+  }
+
+  /* Shiki emits classes, not inline styles, so the palette resolves here from
+     the same theme variables the rest of the page uses. */
+  .article-content :global(.sh-text) {
+    color: var(--foreground);
+  }
+  .article-content :global(.sh-comment) {
+    color: var(--syntax-comment);
+  }
+  .article-content :global(.sh-keyword) {
+    color: var(--syntax-keyword);
+  }
+  .article-content :global(.sh-string) {
+    color: var(--syntax-string);
+  }
+  .article-content :global(.sh-string-expression) {
+    color: var(--syntax-string-expression);
+  }
+  .article-content :global(.sh-constant) {
+    color: var(--syntax-constant);
+  }
+  .article-content :global(.sh-function) {
+    color: var(--syntax-function);
+  }
+  .article-content :global(.sh-parameter) {
+    color: var(--syntax-parameter);
+  }
+  .article-content :global(.sh-punctuation) {
+    color: var(--syntax-punctuation);
+  }
+  .article-content :global(.sh-link) {
+    color: var(--syntax-link);
+  }
+  .article-content :global(.sh-inserted) {
+    color: var(--syntax-inserted);
+  }
+  .article-content :global(.sh-deleted) {
+    color: var(--syntax-deleted);
+  }
+  .article-content :global(.sh-changed) {
+    color: var(--syntax-changed);
+  }
+  .article-content :global(.sh-italic) {
+    font-style: italic;
+  }
+  .article-content :global(.sh-bold) {
+    font-weight: 700;
+  }
+  .article-content :global(.sh-underline) {
+    text-decoration: underline;
+  }
+
+  .article-content :global(.code-copy) {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    padding: 0.25rem 0.6rem;
+    font-size: 0.75rem;
+    font-family: inherit;
+    line-height: 1.4;
+    color: var(--muted-foreground);
+    background: var(--secondary);
+    border: 1px solid var(--border);
+    border-radius: 0.375rem;
+    opacity: 0.55;
+    transition: opacity 0.15s ease, color 0.15s ease;
+  }
+
+  .article-content :global(.code-block:hover .code-copy),
+  .article-content :global(.code-copy:focus-visible),
+  .article-content :global(.code-copy[data-state]) {
+    opacity: 1;
+  }
+
+  .article-content :global(.code-copy[data-state='copied']) {
+    color: var(--primary);
+  }
+
+  .article-content :global(.code-copy[data-state='failed']) {
+    color: var(--destructive-foreground);
+    background: var(--destructive);
+  }
+
   .article-content :global(a) {
     color: var(--primary);
     text-decoration: underline;
@@ -244,3 +335,53 @@ const tags = article.tags;
     font-weight: 600;
   }
 </style>
+
+<script>
+  // The button is injected rather than server-rendered so that a page without a
+  // usable Clipboard API (any non-secure context) shows no button at all rather
+  // than one that does nothing when pressed.
+  const clipboard = navigator.clipboard;
+
+  if (clipboard) {
+    const blocks = document.querySelectorAll<HTMLElement>(
+      '.article-content .code-block',
+    );
+
+    for (const block of blocks) {
+      const code = block.querySelector('pre code');
+      if (!code) continue;
+
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'code-copy';
+      button.textContent = 'Copy';
+      // Several buttons per page would otherwise all be named just "Copy".
+      const language = code.className.replace(/^language-/, '');
+      button.setAttribute(
+        'aria-label',
+        language ? `Copy ${language} code` : 'Copy code',
+      );
+      // The label carries the result, so announce it when it changes.
+      button.setAttribute('aria-live', 'polite');
+
+      let resetTimer = 0;
+      button.addEventListener('click', async () => {
+        try {
+          await clipboard.writeText(code.textContent ?? '');
+          button.textContent = 'Copied';
+          button.dataset.state = 'copied';
+        } catch {
+          button.textContent = 'Copy failed';
+          button.dataset.state = 'failed';
+        }
+        window.clearTimeout(resetTimer);
+        resetTimer = window.setTimeout(() => {
+          button.textContent = 'Copy';
+          delete button.dataset.state;
+        }, 2000);
+      });
+
+      block.appendChild(button);
+    }
+  }
+</script>
diff --git a/src/styles/global.css b/src/styles/global.css
index 56cd634..432cee0 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -46,6 +46,18 @@
   --toc: #fafafa;
   --toc-foreground: #171717;
   --toc-border: #e5e7eb;
+  --syntax-comment: #6e7781;
+  --syntax-keyword: #cf222e;
+  --syntax-string: #0a3069;
+  --syntax-string-expression: #0a3069;
+  --syntax-constant: #0550ae;
+  --syntax-function: #8250df;
+  --syntax-parameter: #953800;
+  --syntax-punctuation: #24292f;
+  --syntax-link: #0550ae;
+  --syntax-inserted: #1a7f37;
+  --syntax-deleted: #cf222e;
+  --syntax-changed: #9a6700;
 }
 
 .dark {
@@ -87,6 +99,18 @@
   --toc: #262626;
   --toc-foreground: #fafafa;
   --toc-border: #1a1a1a;
+  --syntax-comment: #8b949e;
+  --syntax-keyword: #ff7b72;
+  --syntax-string: #a5d6ff;
+  --syntax-string-expression: #a5d6ff;
+  --syntax-constant: #79c0ff;
+  --syntax-function: #d2a8ff;
+  --syntax-parameter: #ffa657;
+  --syntax-punctuation: #c9d1d9;
+  --syntax-link: #79c0ff;
+  --syntax-inserted: #3fb950;
+  --syntax-deleted: #f85149;
+  --syntax-changed: #d29922;
 }
 
 @theme inline {