docs: replace prismjs with shiki 🎁 (#7838)

Author: gioboa

packages/docs/package.json

@@ -26,7 +26,6 @@
     "@supabase/supabase-js": "2.53.0",
     "@tailwindcss/vite": "4.1.11",
     "@types/leaflet": "1.9.20",
-    "@types/prismjs": "1.26.5",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@unpic/core": "0.0.42",
@@ -39,7 +38,6 @@
     "openai": "3.3.0",
     "prettier": "3.6.2",
     "prism-themes": "1.9.0",
-    "prismjs": "1.30.0",
     "puppeteer": "22.13.1",
     "qwik-image": "0.0.16",
     "react": "18.3.1",

packages/docs/src/components/code-block/code-block.tsx

@@ -1,11 +1,11 @@
 import { component$, useSignal, useStyles$, useVisibleTask$, type QRL } from '@builder.io/qwik';
-
 import { CopyCode } from '../copy-code/copy-code-block';
 import styles from './code-block.css?inline';
-import { highlight } from './prismjs';
+import { shikiInstance, SHIKI_THEME, type ShikiLangs } from './shiki-config';
+
 interface CodeBlockProps {
   path?: string;
-  language?: 'markup' | 'css' | 'javascript' | 'json' | 'jsx' | 'tsx';
+  language?: ShikiLangs;
   code: string;
   pathInView$?: QRL<(name: string) => void>;
   observerRootId?: string;
@@ -36,17 +36,13 @@ export const CodeBlock = component$((props: CodeBlockProps) => {
   let language = props.language;
   if (!language && props.path && props.code) {
     const ext = props.path.split('.').pop();
-    language =
-      ext === 'js' || ext === 'json'
-        ? 'javascript'
-        : ext === 'html'
-          ? 'markup'
-          : ext === 'css'
-            ? 'css'
-            : undefined;
+    language = ext === 'js' || ext === 'json' ? 'javascript' : ext === 'css' ? 'css' : 'html';
   }
 
-  const highlighted = highlight(props.code, language);
+  const highlighted = shikiInstance.codeToHtml(props.code, {
+    lang: language!,
+    theme: SHIKI_THEME,
+  });
   const className = `language-${language}`;
   return (
     <div class="relative">

packages/docs/src/components/code-block/prismjs.ts

@@ -0,0 +1,14 @@
+import { createHighlighter } from 'shiki/bundle/web';
+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,
+});

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

@@ -102,7 +102,7 @@ export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProp
 
         {store.selectedOutputPanel === 'html' ? (
           <div class="output-result output-html">
-            <CodeBlock language="markup" code={store.html} />
+            <CodeBlock language="html" code={store.html} />
           </div>
         ) : null}
 

packages/docs/src/repl/repl-output-panel.tsx

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "incremental": true,
-    "target": "ES2020",
-    "module": "ES2020",
+    "target": "es2022",
+    "module": "es2022",
     "lib": ["es2021", "DOM", "webworker", "DOM.Iterable"],
     "resolveJsonModule": true,
     "jsx": "react-jsx",