Revert "docs: replace prismjs with shiki 🎁 (#7838)"

This reverts commit 45ec5bf.

Turns out that shiki is a lot slower than prismjs, which makes switching to the code panels very slow.

Author: wmertens

packages/docs/package.json

@@ -29,6 +29,7 @@
     "@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",
@@ -41,6 +42,7 @@
     "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

@@ -7,17 +7,17 @@ import {
   type QRL,
   type Signal,
 } from '@builder.io/qwik';
+
 import { CopyCode } from '../copy-code/copy-code-block';
 import styles from './code-block.css?inline';
-import { shikiInstance, SHIKI_THEME, type ShikiLangs } from './shiki-config';
+import { highlight } from './prismjs';
 import { format } from 'prettier/standalone';
 import parserHtml from 'prettier/plugins/html';
 import parserTs from 'prettier/plugins/typescript';
 import parserEstree from 'prettier/plugins/estree';
-
 interface CodeBlockProps {
   path?: string;
-  language?: ShikiLangs;
+  language?: 'markup' | 'css' | 'javascript' | 'json' | 'jsx' | 'tsx';
   code: string;
   format?: boolean;
   pathInView$?: QRL<(name: string) => void>;
@@ -36,8 +36,10 @@ export const CodeBlock = component$((props: CodeBlockProps) => {
       ? /\.([cm]?[jt]sx?|json)$/.test(props.path)
         ? 'javascript'
         : props.path.endsWith('.html')
-          ? 'html'
-          : null
+          ? 'markup'
+          : props.path.endsWith('.css')
+            ? 'css'
+            : null
       : null);
 
   useStyles$(styles);
@@ -49,7 +51,7 @@ export const CodeBlock = component$((props: CodeBlockProps) => {
     if (formatSig.value) {
       try {
         // simple formatting for html and js
-        if (language === 'html') {
+        if (language === 'markup') {
           codeSig.value = await format(props.code, {
             parser: 'html',
             plugins: [parserHtml],
@@ -90,18 +92,14 @@ export const CodeBlock = component$((props: CodeBlockProps) => {
   });
 
   const highlighted =
-    codeSig.value != null &&
-    shikiInstance.codeToHtml(codeSig.value, {
-      lang: language!,
-      theme: SHIKI_THEME,
-    });
+    codeSig.value != null && language ? highlight(codeSig.value, language) : codeSig.value;
   const className = `language-${language}`;
   return (
     <div class="relative">
       <pre class={className} ref={listSig}>
         {highlighted && <code class={className} dangerouslySetInnerHTML={highlighted} />}
       </pre>
-      {(language === 'html' || language === 'javascript') && (
+      {(language === 'markup' || language === 'javascript') && (
         <PrettierToggle bind:value={formatSig} />
       )}
       <CopyCode code={props.code} />

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

@@ -0,0 +1,10 @@
+import prismjs from 'prismjs';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-tsx';
+
+export const highlight = (code?: string, language?: string) => {
+  if (!code || !language || !prismjs.languages[language]) {
+    return `<code class="language-${language}"><pre>${code}</pre></code>`;
+  }
+  return prismjs.highlight(code, prismjs.languages[language], language);
+};

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

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