docs: use shiki fine-grained bundle 🥦 (#7910)

Author: gioboa

packages/docs/package.json

@@ -19,10 +19,12 @@
     "@mui/x-data-grid": "6.20.4",
     "@qwik-ui/headless": "0.6.7",
     "@qwik.dev/partytown": "0.11.2",
-    "@shikijs/colorized-brackets": "3.9.1",
-    "@shikijs/rehype": "3.9.1",
-    "@shikijs/transformers": "3.9.1",
-    "@shikijs/types": "3.9.1",
+    "@shikijs/colorized-brackets": "3.12.2",
+    "@shikijs/langs": "3.12.2",
+    "@shikijs/rehype": "3.12.2",
+    "@shikijs/themes": "3.12.2",
+    "@shikijs/transformers": "3.12.2",
+    "@shikijs/types": "3.12.2",
     "@supabase/supabase-js": "2.53.0",
     "@tailwindcss/vite": "4.1.11",
     "@types/leaflet": "1.9.20",
@@ -42,7 +44,7 @@
     "qwik-image": "0.0.16",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "shiki": "3.9.1",
+    "shiki": "3.12.2",
     "snarkdown": "2.0.0",
     "tailwindcss": "4.1.11",
     "terser": "5.43.1",

packages/docs/src/components/code-block/shiki-config.ts

@@ -1,14 +1,20 @@
-import { createHighlighter } from 'shiki/bundle/web';
+import css from '@shikijs/langs/css';
+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 tsx from '@shikijs/langs/tsx';
+import darkPlus from '@shikijs/themes/dark-plus';
+import { createHighlighterCore } from 'shiki/core';
 import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
 
 export const SHIKI_THEME = 'dark-plus';
 
 const shikiLangs = ['html', 'css', 'javascript', 'json', 'jsx', 'tsx'] as const;
 export type ShikiLangs = (typeof shikiLangs)[number];
 
-const jsEngine = createJavaScriptRegexEngine();
-export const shikiInstance = await createHighlighter({
-  themes: [SHIKI_THEME],
-  langs: [...shikiLangs],
-  engine: jsEngine,
+export const shikiInstance = await createHighlighterCore({
+  themes: [darkPlus],
+  langs: [html, css, javascript, json, jsx, tsx],
+  engine: createJavaScriptRegexEngine(),
 });

packages/docs/vite.config.mts

@@ -1,18 +1,19 @@
-import { partytownVite } from '@qwik.dev/partytown/utils';
 import { qwikCity } from '@builder.io/qwik-city/vite';
 import { qwikInsights } from '@builder.io/qwik-labs/vite';
 import { qwikReact } from '@builder.io/qwik-react/vite';
 import { qwikVite } from '@builder.io/qwik/optimizer';
+import { partytownVite } from '@qwik.dev/partytown/utils';
+import { transformerColorizedBrackets } from '@shikijs/colorized-brackets';
+import shikiRehype from '@shikijs/rehype';
+import darkPlus from '@shikijs/themes/dark-plus';
+import { transformerMetaHighlight, transformerMetaWordHighlight } from '@shikijs/transformers';
+import type { ShikiTransformer } from '@shikijs/types';
+import tailwindcss from '@tailwindcss/vite';
 import path, { resolve } from 'node:path';
 import { defineConfig, loadEnv, type Plugin, type Rollup } from 'vite';
 import Inspect from 'vite-plugin-inspect';
 import { examplesData, playgroundData, rawSource, tutorialData } from './vite.repl-apps';
 import { sourceResolver } from './vite.source-resolver';
-import tailwindcss from '@tailwindcss/vite';
-import shikiRehype from '@shikijs/rehype';
-import { transformerMetaHighlight, transformerMetaWordHighlight } from '@shikijs/transformers';
-import { transformerColorizedBrackets } from '@shikijs/colorized-brackets';
-import type { ShikiTransformer } from '@shikijs/types';
 
 const PUBLIC_QWIK_INSIGHTS_KEY = loadEnv('', '.', 'PUBLIC').PUBLIC_QWIK_INSIGHTS_KEY;
 const docsDir = new URL(import.meta.url).pathname;
@@ -191,7 +192,7 @@ export default defineConfig(async () => {
             [
               shikiRehype,
               {
-                theme: 'dark-plus',
+                theme: darkPlus,
                 transformers: [
                   transformerMetaHighlight(),
                   transformerMetaWordHighlight(),