docs: highlight code with Shiki vitesse-light/vitesse-dark themes

Author: antfubot

docs/nuxt.config.ts

@@ -1,4 +1,5 @@
 import process from 'node:process'
+import { fileURLToPath } from 'node:url'
 
 export default defineNuxtConfig({
   compatibilityDate: '2026-08-21',
@@ -9,6 +10,12 @@ export default defineNuxtConfig({
 
   css: ['~/assets/css/devframe.css'],
 
+  // Redirect the layer's rangi highlighter import to a shim that renders code
+  // with Shiki's vitesse-light / vitesse-dark themes.
+  alias: {
+    'comark/plugins/rangi': fileURLToPath(new URL('./shims/rangi.ts', import.meta.url)),
+  },
+
   site: {
     url: 'https://devfra.me',
     name: 'Devframe',

docs/package.json

@@ -8,6 +8,7 @@
     "docs:serve": "nuxt preview"
   },
   "dependencies": {
+    "@shikijs/themes": "catalog:docs",
     "comark-docs": "catalog:docs",
     "nuxt": "catalog:build",
     "ufo": "catalog:deps"

docs/shims/rangi.ts

@@ -0,0 +1,14 @@
+import vitesseDark from '@shikijs/themes/vitesse-dark'
+import vitesseLight from '@shikijs/themes/vitesse-light'
+import shiki from 'comark/plugins/shiki'
+
+// Aliased over `comark/plugins/rangi` (see `nuxt.config.ts` → `alias`) so the
+// comark-docs layer's content pipeline highlights code with Shiki's
+// vitesse-light / vitesse-dark themes instead of rangi + GitHub themes.
+// The layer calls this with a rangi `{ theme }` option we intentionally ignore.
+export default function rangiToShiki(_options?: unknown) {
+  return shiki({
+    registerDefaultThemes: false,
+    themes: { light: vitesseLight, dark: vitesseDark },
+  })
+}

knip.jsonc

@@ -40,7 +40,12 @@
       // Nuxt auto-registers `app/components` and `app/composables`; the files
       // here shadow same-named pieces of the comark-docs layer (AppHeaderBrand,
       // useFilteredNavigation, ...), so nothing imports them explicitly.
-      "entry": ["app/components/*.vue", "app/composables/*.ts"]
+      // `shims/rangi.ts` is wired in through `nuxt.config.ts`'s `alias`.
+      "entry": ["app/components/*.vue", "app/composables/*.ts", "shims/*.ts"],
+      // `comark` is the comark-docs layer's own (pkg.pr.new pinned) dep; the
+      // rangi->shiki shim imports `comark/plugins/shiki` from it, resolved
+      // through the workspace's hoisted store.
+      "ignoreDependencies": ["comark"]
     },
     "examples/hub-next": {
       // The React client build's root sits at `src/client` (`next dev

pnpm-lock.yaml

@@ -128,6 +128,7 @@ catalogs:
     zigpty: ^0.2.1
     zod: ^4.4.3
   docs:
+    '@shikijs/themes': ^4.4.3
     comark-docs: github:comarkdown/comark-docs
   frontend:
     '@antfu/design': ^0.3.4