chore: use rangi

package.json

@@ -35,9 +35,7 @@
   "dependencies": {
     "@ai-sdk/gateway": "^4.0.16",
     "@ai-sdk/vue": "^4.0.22",
-    "comark-content": "^0.3.0",
-    "@comark/nuxt": "^0.6.0",
-    "ai": "^7.0.22",
+    "@comark/nuxt": "^0.6.1",
     "@iconify-json/lucide": "^1.2.120",
     "@iconify-json/simple-icons": "^1.2.92",
     "@iconify-json/vscode-icons": "^1.2.67",
@@ -48,19 +46,20 @@
     "@nuxtjs/sitemap": "^8.3.0",
     "@octokit/webhooks-methods": "^6.0.0",
     "@resvg/resvg-js": "^2.6.2",
-    "@shikijs/themes": "^4.3.1",
     "@vercel/functions": "^3.7.6",
     "@vueuse/core": "^14.3.0",
+    "ai": "^7.0.22",
     "beautiful-mermaid": "^1.1.3",
-    "comark": "^0.6.0",
+    "comark": "^0.6.1",
+    "comark-content": "^0.3.0",
     "defu": "^6.1.7",
     "exsolve": "^1.1.0",
     "motion-v": "^2.3.0",
     "nuxt-og-image": "^6.7.4",
     "nuxt-seo-utils": "^8.3.2",
     "pathe": "^2.0.3",
+    "rangi": "^2.2.0",
     "satori": "^0.29.0",
-    "shiki": "^4.3.1",
     "tailwindcss": "^4.3.3",
     "ufo": "^1.6.4",
     "unstorage": "^1.17.5",

pnpm-workspace.yaml

@@ -14,9 +14,9 @@ minimumReleaseAgeExclude:
   - "@nuxt/nitro-server@4.5.1"
   - "@nuxt/vite-builder@4.5.1"
   - nuxt@4.5.1
-  - "@comark/nuxt@0.6.0"
-  - "@comark/vue@0.6.0"
-  - comark@0.6.0
+  - '@comark/nuxt@0.6.0 || 0.6.1'
+  - '@comark/vue@0.6.0 || 0.6.1'
+  - comark@0.6.0 || 0.6.1
   - comark-content@0.3.0
 
 overrides:

server/api/code-explorer/[...path].get.ts

@@ -1,10 +1,9 @@
 import { resolve } from 'node:path'
 import { parseMarkdown, type MarkdownDocument } from 'comark'
-import highlight from '@comark/nuxt/plugins/highlight'
+import rangi from 'comark/plugins/rangi'
 import fs from 'comark-content/sources/fs'
 import github from 'comark-content/sources/github'
-import githubLight from '@shikijs/themes/github-light'
-import githubDark from '@shikijs/themes/github-dark'
+import { githubLight, githubDark } 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,11 +92,8 @@ export default defineEventHandler(async (event) => {
     })
   }
 
-  const highlightPlugin = highlight({
-    themes: {
-      light: githubLight,
-      dark: githubDark,
-    },
+  const highlightPlugin = rangi({
+    theme: { light: githubLight, dark: githubDark },
   })
   const fileResults: Record<string, MarkdownDocument> = {}
 

server/utils/content.ts

@@ -1,21 +1,20 @@
 import { comarkContent, defineContentPlugin, type ComarkContent, type CacheOptions } from 'comark-content'
 import fs from 'comark-content/sources/fs'
 import github from 'comark-content/sources/github'
-import highlight from 'comark/plugins/highlight'
+import rangi from 'comark/plugins/rangi'
 import security from 'comark/plugins/security'
 import emoji from 'comark/plugins/emoji'
 import toc from 'comark/plugins/toc'
 import mermaid from 'comark/plugins/mermaid'
-import githubLight from '@shikijs/themes/github-light'
-import githubDark from '@shikijs/themes/github-dark'
+import { githubLight, githubDark } from 'rangi/themes'
 
 // Rebuilt only when the head advances (see `getProdContent`). Holds the *promise*, not the instance: the
 // assignment lands after the await, so two requests on a cold instance would each build a CMS.
 let content: Promise<ComarkContent> | undefined
 
 const comarkPlugins = [
   mermaid({ theme: 'zinc-light', themeDark: 'zinc-dark' }),
-  highlight({ themes: { light: githubLight, dark: githubDark } }),
+  rangi({ theme: { light: githubLight, dark: githubDark } }),
   toc({ depth: 3 }),
   emoji(),
   security({