From fd1a40c3afc67f20fb0639bf50780dfa7d8898dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <atinux@gmail.com>
Date: Mon, 24 Aug 2026 13:40:35 +0200
Subject: [PATCH] docs: add Vercel docs highlighting

This squash commit was prepared by an AI agent on behalf of @atinux, who reviewed the changes.

Co-authored-by: David <dbzx-10299@hotmail.com>
---
 app/app.config.ts                            |  11 +-
 app/assets/css/theme.css                     | 210 ++++++++++++++++++-
 app/components/CodeExplorer.vue              |   6 -
 app/components/landing/LandingHeroDemo.vue   |   5 +-
 playground/content/2.writing/3.components.md | 110 ++++++----
 playground/content/index.md                  |  16 +-
 server/api/code-explorer/[...path].get.ts    |   4 +-
 server/utils/content.ts                      |   4 +-
 8 files changed, 301 insertions(+), 65 deletions(-)

diff --git a/app/app.config.ts b/app/app.config.ts
index 4b928f8..c38c931 100644
--- a/app/app.config.ts
+++ b/app/app.config.ts
@@ -136,16 +136,21 @@ export default defineAppConfig({
         vite: 'i-logos-vite-icon',
         angular: 'i-logos-angular-icon',
         ansi: 'i-lucide-terminal',
+        typescript: 'i-vscode-icons-file-type-typescript-official',
+        ts: 'i-vscode-icons-file-type-typescript-official',
+        yaml: 'i-vscode-icons-file-type-light-yaml-official',
+        yml: 'i-vscode-icons-file-type-light-yaml-official'
       },
       codeGroup: {
         slots: {
-          list: 'bg-muted',
+          list: 'bg-(--ds-background-200)',
         },
       },
       pre: {
         slots: {
-          header: 'bg-muted border-muted',
-          base: 'bg-white dark:bg-default border-muted **:[.line.highlight]:bg-elevated/50! dark:**:[.line.highlight]:bg-accented/80! [font-variant-ligatures:none]',
+          filename: 'text-[13px]/5',
+          header: 'bg-(--ds-background-200) border-muted',
+          base: 'bg-(--ds-background-100) border-muted **:[.line.highlight]:bg-(--ds-blue-300)! **:[.line.highlight]:[box-shadow:inset_2px_0_0_0_var(--ds-blue-900)] [font-variant-ligatures:none] text-[13px]/5',
         },
       },
       code: {
diff --git a/app/assets/css/theme.css b/app/assets/css/theme.css
index 95c3013..1ccd087 100644
--- a/app/assets/css/theme.css
+++ b/app/assets/css/theme.css
@@ -6,8 +6,6 @@
 }
 
 :root {
-  overscroll-behavior-y: none;
-
   --ui-container: 91.5rem;
 
   --ui-primary: var(--ui-color-neutral-900);
@@ -31,6 +29,117 @@
   --ui-border-muted: var(--ui-color-neutral-200);
   --ui-border-accented: var(--ui-color-neutral-300);
   --ui-border-inverted: var(--ui-color-neutral-950);
+
+  --ds-gray-100: hsl(0, 0%, 95%);
+  --ds-gray-200: hsl(0, 0%, 92%);
+  --ds-gray-300: hsl(0, 0%, 90%);
+  --ds-gray-400: hsl(0, 0%, 92%);
+  --ds-gray-500: hsl(0, 0%, 79%);
+  --ds-gray-600: hsl(0, 0%, 66%);
+  --ds-gray-700: hsl(0, 0%, 56%);
+  --ds-gray-800: hsl(0, 0%, 49%);
+  --ds-gray-900: hsl(0, 0%, 30%);
+  --ds-gray-1000: hsl(0, 0%, 9%);
+
+  --ds-background-100: hsl(0, 0%, 100%);
+  --ds-background-200: hsl(0, 0%, 98%);
+
+  /* rangi's built-in `cssVariables` theme is shared by code rendering. */
+  --shj-bg: transparent;
+  --shj-fg: var(--ds-gray-1000);
+  --shj-numbers: var(--ds-gray-900);
+  --shj-kwd: var(--ds-pink-900);
+  --shj-str: var(--ds-green-900);
+  --shj-cmnt: var(--ds-gray-900);
+  --shj-func: var(--ds-purple-900);
+  --shj-num: var(--ds-blue-900);
+  --shj-bool: var(--ds-blue-900);
+  --shj-var: var(--ds-blue-900);
+  --shj-class: var(--ds-purple-900);
+  --shj-type: var(--ds-purple-900);
+  --shj-oper: var(--ds-pink-900);
+  --shj-bracket: var(--ds-gray-1000);
+  --shj-esc: var(--ds-green-900);
+  --shj-section: var(--ds-blue-900);
+  --shj-insert: var(--ds-green-900);
+  --shj-deleted: var(--ds-red-900);
+  --shj-err: var(--ds-red-900);
+
+  /* Gated on oklch support only (near-universal): a color-gamut check here would
+     leave every --ds-* value undefined on the vast majority of non-P3 displays,
+     since browsers safely gamut-map out-of-range oklch to sRGB on their own. */
+  @supports (color: oklch(0 0 0)) {
+    --ds-blue-100: oklch(97.32% 0.0141 251.56);
+    --ds-blue-200: oklch(96.29% 0.0195 250.59);
+    --ds-blue-300: oklch(94.58% 0.0293 249.849);
+    --ds-blue-400: oklch(91.58% 0.0473 245.116);
+    --ds-blue-500: oklch(82.75% 0.0979 248.48);
+    --ds-blue-600: oklch(73.08% 0.1583 248.133);
+    --ds-blue-700: oklch(57.61% 0.2508 258.23);
+    --ds-blue-800: oklch(51.51% 0.2399 257.85);
+    --ds-blue-900: oklch(53.18% 0.2399 256.99);
+    --ds-blue-1000: oklch(26.67% 0.1099 254.34);
+    --ds-red-100: oklch(96.5% 0.0223 13.09);
+    --ds-red-200: oklch(95.41% 0.0299 14.2526);
+    --ds-red-300: oklch(94.33% 0.0369 15.0115);
+    --ds-red-400: oklch(91.51% 0.0471 19.8);
+    --ds-red-500: oklch(84.47% 0.1018 17.71);
+    --ds-red-600: oklch(71.12% 0.1881 21.22);
+    --ds-red-700: oklch(62.56% 0.2524 23.03);
+    --ds-red-800: oklch(58.19% 0.2482 25.15);
+    --ds-red-900: oklch(54.99% 0.232 25.29);
+    --ds-red-1000: oklch(24.8% 0.1041 18.86);
+    --ds-amber-100: oklch(97.48% 0.0331 85.79);
+    --ds-amber-200: oklch(96.81% 0.0495 90.2423);
+    --ds-amber-300: oklch(95.93% 0.0636 90.52);
+    --ds-amber-400: oklch(91.02% 0.1322 88.25);
+    --ds-amber-500: oklch(86.55% 0.1583 79.63);
+    --ds-amber-600: oklch(80.25% 0.1953 73.59);
+    --ds-amber-700: oklch(81.87% 0.1969 76.46);
+    --ds-amber-800: oklch(77.21% 0.1991 64.28);
+    --ds-amber-900: oklch(52.79% 0.1496 54.65);
+    --ds-amber-1000: oklch(30.83% 0.099 45.48);
+    --ds-green-100: oklch(97.59% 0.0289 145.42);
+    --ds-green-200: oklch(96.92% 0.037 147.15);
+    --ds-green-300: oklch(94.6% 0.0674 144.23);
+    --ds-green-400: oklch(91.49% 0.0976 146.24);
+    --ds-green-500: oklch(85.45% 0.1627 146.3);
+    --ds-green-600: oklch(80.25% 0.214 145.18);
+    --ds-green-700: oklch(64.58% 0.1746 147.27);
+    --ds-green-800: oklch(57.81% 0.1507 147.5);
+    --ds-green-900: oklch(51.75% 0.1453 147.65);
+    --ds-green-1000: oklch(29.15% 0.1197 147.38);
+    --ds-teal-100: oklch(97.72% 0.0359 186.7);
+    --ds-teal-200: oklch(97.06% 0.0347 180.66);
+    --ds-teal-300: oklch(94.92% 0.0478 182.07);
+    --ds-teal-400: oklch(92.76% 0.0718 183.78);
+    --ds-teal-500: oklch(86.88% 0.1344 182.42);
+    --ds-teal-600: oklch(81.5% 0.161 178.96);
+    --ds-teal-700: oklch(64.92% 0.1572 181.95);
+    --ds-teal-800: oklch(57.53% 0.1392 181.66);
+    --ds-teal-900: oklch(52.08% 0.1251 182.93);
+    --ds-teal-1000: oklch(32.11% 0.0788 179.82);
+    --ds-purple-100: oklch(96.65% 0.0244 312.189);
+    --ds-purple-200: oklch(96.73% 0.0228 309.8);
+    --ds-purple-300: oklch(94.85% 0.0364 310.15);
+    --ds-purple-400: oklch(91.77% 0.0614 312.82);
+    --ds-purple-500: oklch(81.26% 0.1409 310.8);
+    --ds-purple-600: oklch(72.07% 0.2083 308.19);
+    --ds-purple-700: oklch(55.5% 0.3008 306.12);
+    --ds-purple-800: oklch(48.58% 0.2638 305.73);
+    --ds-purple-900: oklch(47.18% 0.2579 304);
+    --ds-purple-1000: oklch(23.96% 0.13 305.66);
+    --ds-pink-100: oklch(95.69% 0.0359 344.622);
+    --ds-pink-200: oklch(95.71% 0.0321 353.14);
+    --ds-pink-300: oklch(93.83% 0.0451 356.29);
+    --ds-pink-400: oklch(91.12% 0.0573 358.82);
+    --ds-pink-500: oklch(84.28% 0.0915 356.99);
+    --ds-pink-600: oklch(74.33% 0.1547 0.24);
+    --ds-pink-700: oklch(63.52% 0.238 1.01);
+    --ds-pink-800: oklch(59.51% 0.2339 4.21);
+    --ds-pink-900: oklch(53.5% 0.2058 2.84);
+    --ds-pink-1000: oklch(26% 0.0977 359);
+  }
 }
 
 .dark {
@@ -55,14 +164,97 @@
   --ui-border-muted: var(--ui-color-neutral-800);
   --ui-border-accented: var(--ui-color-neutral-800);
   --ui-border-inverted: var(--ui-color-neutral-50);
+
+  --ds-gray-100: hsl(0, 0%, 10%);
+  --ds-gray-200: hsl(0, 0%, 12%);
+  --ds-gray-300: hsl(0, 0%, 16%);
+  --ds-gray-400: hsl(0, 0%, 18%);
+  --ds-gray-500: hsl(0, 0%, 27%);
+  --ds-gray-600: hsl(0, 0%, 53%);
+  --ds-gray-700: hsl(0, 0%, 56%);
+  --ds-gray-800: hsl(0, 0%, 49%);
+  --ds-gray-900: hsl(0, 0%, 63%);
+  --ds-gray-1000: hsl(0, 0%, 93%);
+
+  --ds-background-100: hsl(0, 0%, 4%);
+  --ds-background-200: hsl(0, 0%, 0%);
+
+  @supports (color: oklch(0 0 0)) {
+    --ds-blue-100: oklch(22.17% 0.069 259.89);
+    --ds-blue-200: oklch(25.45% 0.0811 255.8);
+    --ds-blue-300: oklch(30.86% 0.1022 255.21);
+    --ds-blue-400: oklch(34.1% 0.121 254.74);
+    --ds-blue-500: oklch(38.5% 0.1403 254.4);
+    --ds-blue-600: oklch(64.94% 0.1982 251.813);
+    --ds-blue-700: oklch(57.61% 0.2321 258.23);
+    --ds-blue-800: oklch(51.51% 0.2307 257.85);
+    --ds-blue-900: oklch(71.7% 0.1648 250.794);
+    --ds-blue-1000: oklch(96.75% 0.0179 242.423);
+    --ds-red-100: oklch(22.1% 0.0657 15.11);
+    --ds-red-200: oklch(25.93% 0.0834 19.02);
+    --ds-red-300: oklch(31.47% 0.1105 20.96);
+    --ds-red-400: oklch(35.27% 0.1273 21.23);
+    --ds-red-500: oklch(40.68% 0.1479 23.16);
+    --ds-red-600: oklch(62.56% 0.2277 23.03);
+    --ds-red-700: oklch(62.56% 0.2234 23.03);
+    --ds-red-800: oklch(58.01% 0.227 25.12);
+    --ds-red-900: oklch(69.96% 0.2136 22.03);
+    --ds-red-1000: oklch(95.6% 0.0293 6.61);
+    --ds-amber-100: oklch(22.46% 0.0538 76.04);
+    --ds-amber-200: oklch(24.95% 0.0642 64.78);
+    --ds-amber-300: oklch(32.34% 0.0837 63.83);
+    --ds-amber-400: oklch(35.53% 0.0903 66.2971);
+    --ds-amber-500: oklch(41.55% 0.1044 67.98);
+    --ds-amber-600: oklch(75.04% 0.1737 74.49);
+    --ds-amber-700: oklch(81.87% 0.1969 76.46);
+    --ds-amber-800: oklch(77.21% 0.1991 64.28);
+    --ds-amber-900: oklch(77.21% 0.1991 64.28);
+    --ds-amber-1000: oklch(96.7% 0.0418 84.59);
+    --ds-green-100: oklch(23.09% 0.0716 149.68);
+    --ds-green-200: oklch(27.12% 0.0895 150.09);
+    --ds-green-300: oklch(29.84% 0.096 149.25);
+    --ds-green-400: oklch(34.39% 0.1039 147.78);
+    --ds-green-500: oklch(44.19% 0.1484 147.2);
+    --ds-green-600: oklch(58.11% 0.1815 146.55);
+    --ds-green-700: oklch(64.58% 0.199 147.27);
+    --ds-green-800: oklch(57.81% 0.1776 147.5);
+    --ds-green-900: oklch(73.1% 0.2158 148.29);
+    --ds-green-1000: oklch(96.76% 0.056 154.18);
+    --ds-teal-100: oklch(22.1% 0.0544 178.74);
+    --ds-teal-200: oklch(25.06% 0.062 178.76);
+    --ds-teal-300: oklch(31.5% 0.0767 180.99);
+    --ds-teal-400: oklch(32.43% 0.0763 180.13);
+    --ds-teal-500: oklch(43.35% 0.1055 180.97);
+    --ds-teal-600: oklch(60.71% 0.1485 180.24);
+    --ds-teal-700: oklch(64.92% 0.1403 181.95);
+    --ds-teal-800: oklch(57.53% 0.1392 181.66);
+    --ds-teal-900: oklch(74.56% 0.1765 182.8);
+    --ds-teal-1000: oklch(96.46% 0.056 180.29);
+    --ds-purple-100: oklch(22.34% 0.0779 316.87);
+    --ds-purple-200: oklch(25.91% 0.0921 314.41);
+    --ds-purple-300: oklch(31.98% 0.1219 312.41);
+    --ds-purple-400: oklch(35.93% 0.1504 309.78);
+    --ds-purple-500: oklch(40.99% 0.1721 307.92);
+    --ds-purple-600: oklch(55.5% 0.2191 306.12);
+    --ds-purple-700: oklch(55.5% 0.2186 306.12);
+    --ds-purple-800: oklch(48.58% 0.2102 305.73);
+    --ds-purple-900: oklch(69.87% 0.2037 309.51);
+    --ds-purple-1000: oklch(96.1% 0.0304 316.46);
+    --ds-pink-100: oklch(22.67% 0.0628 354.73);
+    --ds-pink-200: oklch(26.2% 0.0859 356.68);
+    --ds-pink-300: oklch(31.15% 0.1067 355.93);
+    --ds-pink-400: oklch(32.13% 0.1174 356.71);
+    --ds-pink-500: oklch(37.01% 0.1453 358.39);
+    --ds-pink-600: oklch(50.33% 0.2089 4.33);
+    --ds-pink-700: oklch(63.52% 0.2346 1.01);
+    --ds-pink-800: oklch(59.51% 0.2429 4.21);
+    --ds-pink-900: oklch(69.36% 0.2223 3.91);
+    --ds-pink-1000: oklch(95.74% 0.0326 350.08);
+  }
 }
 
-html.dark .shiki span {
-  color: var(--shiki-dark) !important;
-  background-color: var(--shiki-dark-bg) !important;
-  font-style: var(--shiki-dark-font-style) !important;
-  font-weight: var(--shiki-dark-font-weight) !important;
-  text-decoration: var(--shiki-dark-text-decoration) !important;
+pre {
+  background: var(--ds-background-100);
 }
 
 @keyframes caret-blink {
@@ -154,5 +346,5 @@ html.dark .shiki span {
 }
 
 .mermaid {
-  @apply rounded overflow-hidden border border-muted;
+  @apply rounded overflow-hidden border border-muted bg-white dark:bg-muted;
 }
diff --git a/app/components/CodeExplorer.vue b/app/components/CodeExplorer.vue
index a55816e..0b70e69 100644
--- a/app/components/CodeExplorer.vue
+++ b/app/components/CodeExplorer.vue
@@ -147,9 +147,3 @@ function onSelect(e: Event, item: CodeExplorerTreeItem) {
   height: 100%;
 }
 </style>
-<!--
-  No global `.dark .shiki span` override here: `app/assets/css/theme.css` already
-  maps every `--shiki-dark-*` custom property for the whole site. A second,
-  narrower copy in this component leaked to every code block on the page and
-  would drift from the canonical one.
--->
diff --git a/app/components/landing/LandingHeroDemo.vue b/app/components/landing/LandingHeroDemo.vue
index ef3aeba..da80463 100644
--- a/app/components/landing/LandingHeroDemo.vue
+++ b/app/components/landing/LandingHeroDemo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import shiki from '@comark/nuxt/plugins/shiki'
+import rangi from 'comark/plugins/rangi'
+import { cssVariables } from 'rangi/themes'
 
 const props = defineProps<{
   /** Markdown source: shown highlighted in the source tab, rendered live in the output tab. */
@@ -8,7 +9,7 @@ const props = defineProps<{
   playground?: string
 }>()
 
-const plugins = [shiki()]
+const plugins = [rangi({ theme: cssVariables })]
 
 // Four-backtick fence so fenced code blocks inside the demo source don't close it early.
 const sourceAsCode = computed(() => ['````md', props.source, '````'].join('\n'))
diff --git a/playground/content/2.writing/3.components.md b/playground/content/2.writing/3.components.md
index 4ce76b8..aa4d267 100644
--- a/playground/content/2.writing/3.components.md
+++ b/playground/content/2.writing/3.components.md
@@ -17,19 +17,23 @@ The layer enables [Nuxt UI typography](https://ui.nuxt.com/docs/typography), so
 
 ### Callouts
 
-```mdc
+::code-preview
 ::note
 Bodies are parsed lazily on `get()`.
 ::
-
 ::warning
 This feature is experimental.
 ::
-```
-
+#code
+```mdc
 ::note
 Bodies are parsed lazily on `get()`.
 ::
+::warning
+This feature is experimental.
+::
+```
+::
 
 Variants: `::note`, `::tip`, `::warning`, `::caution`, and a generic `::callout{icon="i-lucide-info" to="/some/page"}`.
 
@@ -37,79 +41,97 @@ Variants: `::note`, `::tip`, `::warning`, `::caution`, and a generic `::callout{
 
 One fenced block per tab, labeled with `[...]`:
 
-````mdc
+::code-preview
 ::code-group
-
 ```bash [pnpm]
 pnpm add comark-docs@github:comarkdown/comark-docs
 ```
-
 ```bash [npm]
 npm install comark-docs@github:comarkdown/comark-docs
 ```
-
 ::
-````
-
+#code
+````mdc
 ::code-group
-
 ```bash [pnpm]
 pnpm add comark-docs@github:comarkdown/comark-docs
 ```
-
 ```bash [npm]
 npm install comark-docs@github:comarkdown/comark-docs
 ```
-
+::
+````
 ::
 
 ### Cards
 
-```mdc
+::code-preview
 ::card-group
-  :::card{icon="i-lucide-rocket" title="Fast" to="/concepts/architecture"}
+  ::card{icon="i-lucide-rocket" title="Fast" to="/concepts/architecture"}
   Parses on demand, caches by commit.
-  :::
-
-  :::card{icon="i-lucide-git-branch" title="Versioned"}
+  ::
+  ::card{icon="i-lucide-git-branch" title="Versioned"}
   Preview any branch or commit.
-  :::
+  ::
 ::
-```
-
+#code
+```mdc
 ::card-group
-  :::card{icon="i-lucide-rocket" title="Fast" to="/concepts/architecture"}
+  ::card{icon="i-lucide-rocket" title="Fast" to="/concepts/architecture"}
   Parses on demand, caches by commit.
-  :::
+  ::
 
-  :::card{icon="i-lucide-git-branch" title="Versioned"}
+  ::card{icon="i-lucide-git-branch" title="Versioned"}
   Preview any branch or commit.
-  :::
+  ::
+::
+```
 ::
 
 ### Steps
 
 Wrap a sequence of `###` headings to render a numbered procedure:
 
-```mdc
+::code-preview
 ::steps{level="3"}
+### Install the layer
+
+This is the first step.
 
+### Extend your config
+
+This is the second step.
+
+### Write a page
+
+This is the third step.
+::
+#code
+```mdc
+::steps{level="3"}
 ### Install the layer
 
+This is the first step.
+
 ### Extend your config
 
+This is the second step.
+
 ### Write a page
 
+This is the third step.
 ::
 ```
 
+::
+
 Other useful ones: `::tabs` with `:::tabs-item{label="..."}` children, `::collapsible`, `::accordion`, `::code-preview` (rendered output next to its source), and `::code-collapse`. See the [Nuxt UI typography docs](https://ui.nuxt.com/docs/typography) for the full list and props.
 
 ## Nuxt UI components
 
 Any Nuxt UI component works with the `u-` prefix. The [landing page](/writing/landing-page) uses this for its hero:
 
-```mdc
+::code-preview
 ::u-button
 ---
 to: /getting-started/introduction
@@ -117,8 +139,8 @@ trailing-icon: i-lucide-arrow-right
 ---
 Get started
 ::
-```
-
+#code
+```mdc
 ::u-button
 ---
 to: /getting-started/introduction
@@ -126,48 +148,54 @@ trailing-icon: i-lucide-arrow-right
 ---
 Get started
 ::
+```
+::
 
 ## Mermaid diagrams
 
 Write a ` ```mermaid ` code fence and it renders as a diagram, themed for both color modes:
 
-````mdc
+::code-preview
 ```mermaid
 flowchart LR
   A[Markdown push] --> B[GitHub webhook]
   B --> C[ISR purge]
 ```
-````
-
+#code
+````mdc
 ```mermaid
 flowchart LR
   A[Markdown push] --> B[GitHub webhook]
   B --> C[ISR purge]
 ```
+````
+::
 
 ## CodeExplorer
 
 `::code-explorer` embeds a browsable file tree from a GitHub repository, with syntax-highlighted file contents — useful for walking readers through an example project:
 
-```mdc
+::code-preview
 ::code-explorer
 ---
 org: comarkdown
 repo: comark-docs
 path: playground/content
-default-value: playground/content/index.md
+default-value: index.md
 ---
 ::
-```
-
+#code
+```mdc
 ::code-explorer
 ---
 org: comarkdown
 repo: comark-docs
 path: playground/content
-default-value: playground/content/index.md
+default-value: index.md
 ---
 ::
+```
+::
 
 | Prop | Type | Default | Purpose |
 | --- | --- | --- | --- |
@@ -185,12 +213,14 @@ The server only fetches from your own content repository by default. To embed an
 
 `::browser` frames a live site in browser chrome — traffic lights, a URL bar, and an open-in-new-tab button around a lazy-loaded `<iframe>`:
 
+::code-preview
+::browser{src="https://docs-template.comark.dev"}
+::
+#code
 ```mdc
-::browser{src="https://comark.dev"}
+::browser{src="https://docs-template.comark.dev"}
 ::
 ```
-
-::browser{src="https://comark.dev"}
 ::
 
 | Prop | Type | Default | Purpose |
diff --git a/playground/content/index.md b/playground/content/index.md
index 906a372..b964513 100644
--- a/playground/content/index.md
+++ b/playground/content/index.md
@@ -5,11 +5,14 @@ navigation: false
 ---
 
 ::u-page-hero
+---
+orientation: horizontal
+---
 #title
 Docs that ship without a redeploy.
 
 #description
-The first Markdown-driven docs site where content goes live on `git push` — no rebuild, no redeploy. Served at request time through [Comark Content](https://content.comark.dev), cached at the edge, revalidated by a webhook. And every branch or commit is already a live preview.
+The first Markdown-driven docs site where content goes live on `git push`. No rebuild, no redeploy. Served at request time through [Comark Content](https://content.comark.dev), cached at the edge, revalidated by a webhook. And every branch or commit is already a live preview.
 
 #links
   :::u-button
@@ -30,6 +33,17 @@ The first Markdown-driven docs site where content goes live on `git push` — no
   ---
   How it works
   :::
+
+#default
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  extends: ['comark-docs'],
+  site: {
+    url: 'https://docs.example.com',
+    name: 'My Project',
+  },
+})
+```
 ::
 
 ::landing-features
diff --git a/server/api/code-explorer/[...path].get.ts b/server/api/code-explorer/[...path].get.ts
index 275f5f1..9f65330 100644
--- a/server/api/code-explorer/[...path].get.ts
+++ b/server/api/code-explorer/[...path].get.ts
@@ -3,7 +3,7 @@ import { parseMarkdown, type MarkdownDocument } from 'comark'
 import rangi from 'comark/plugins/rangi'
 import fs from 'comark-content/sources/fs'
 import github from 'comark-content/sources/github'
-import { githubLight, githubDark } from 'rangi/themes'
+import { cssVariables } from 'rangi/themes'
 
 // A read source for one example directory. Dev: working tree. Prod: authenticated GitHub — the repo may be
 // private, so jsDelivr / unauthenticated raw are out. Mirrors {@link contentSource}'s dev/prod split.
@@ -93,7 +93,7 @@ export default defineEventHandler(async (event) => {
   }
 
   const highlightPlugin = rangi({
-    theme: { light: githubLight, dark: githubDark },
+    theme: cssVariables,
   })
   const fileResults: Record<string, MarkdownDocument> = {}
 
diff --git a/server/utils/content.ts b/server/utils/content.ts
index e30eeb3..0d54bf9 100644
--- a/server/utils/content.ts
+++ b/server/utils/content.ts
@@ -8,7 +8,7 @@ import toc from 'comark/plugins/toc'
 import mermaid from 'comark/plugins/mermaid'
 import yaml from 'comark-content/plugins/yaml'
 import tracingOtel from 'comark-content/plugins/tracing/otel'
-import { githubLight, githubDark } from 'rangi/themes'
+import { cssVariables } from 'rangi/themes'
 import { contentTracer } from './tracer.ts'
 
 // Rebuilt only when the head advances (see `getProdContent`). Holds the *promise*, not the instance: the
@@ -18,7 +18,7 @@ let content: Promise<ComarkContent> | undefined
 // Bump CONTENT_PARSER_VERSION in `cache.ts` when these plugins or their options change cached output.
 const comarkPlugins = [
   mermaid({ theme: 'zinc-light', themeDark: 'zinc-dark' }),
-  rangi({ theme: { light: githubLight, dark: githubDark } }),
+  rangi({ theme: cssVariables }),
   toc({ depth: 3 }),
   emoji(),
   security({