docs: remove rehype and replace with shiki (#7385)

* removed rehype-pretty-code and replaced with shiki

* fix

* fix

Author: sreeisalso

packages/docs/package.json

@@ -43,8 +43,6 @@
     "qwik-image": "0.0.10",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "rehype-pretty-code": "0.14.0",
-    "shiki": "1.29.1",
     "snarkdown": "2.0.0",
     "tailwindcss": "3.4.6",
     "terser": "5.31.3",
@@ -54,6 +52,11 @@
     "valibot": "0.33.3",
     "vite": "5.3.5",
     "vite-plugin-inspect": "0.8.5",
+    "shiki": "3.1.0",
+    "@shikijs/rehype": "3.1.0",
+    "@shikijs/transformers": "3.1.0",
+    "@shikijs/colorized-brackets": "3.1.0",
+    "@shikijs/types": "3.1.0",
     "wrangler": "3.65.1"
   },
   "engines": {

packages/docs/src/components/code-sandbox/index.tsx

@@ -30,12 +30,7 @@ export default component$<{
           ))}
         </div>
       )}
-      <div
-        class="overflow-auto slot-container mb-4"
-        style={{
-          '--pretty-code-fragment-max-height': maxHeight ? maxHeight + 'px' : 'none',
-        }}
-      >
+      <div class="overflow-auto slot-container mb-4">
         <Slot name={tabs ? String(activeTab.value) : ''} />
       </div>
       <div class="browser shadow-xl">

packages/docs/src/routes/docs/docs.css

@@ -185,29 +185,25 @@ h6 a:hover .icon {
   font-weight: 800;
 }
 
-[data-rehype-pretty-code-fragment] {
-  overflow: auto;
-  color: white;
-  background-color: rgb(1 31 51);
-  border-radius: 8px;
-  margin: 20px 0;
+.highlighted-word {
+  background: #4199d3;
+  color: #111 !important;
 }
 
-[data-rehype-pretty-code-fragment] pre {
-  overflow: auto;
-  border-radius: 8px;
-  max-height: var(--pretty-code-fragment-max-height);
+.highlighted {
+  background-color: #7b8d9f33 !important;
 }
 
-[data-rehype-pretty-code-title] {
-  padding: 5px 15px;
+.shiki-title {
   background: #4199d3;
-  font-family: monospace;
-  font-weight: bold;
+  color: #111;
+  display: block;
+  padding: 0.5rem;
+  border-radius: 8px 8px 0px 0px;
 }
 
-[data-highlighted-chars] {
-  background: #ac7ef4;
+pre {
+  border-radius: 8px;
 }
 
 .docs article pre {

packages/docs/vite.config.mts

@@ -8,6 +8,10 @@ import { defineConfig, loadEnv, type Plugin } from 'vite';
 import Inspect from 'vite-plugin-inspect';
 import { examplesData, playgroundData, rawSource, tutorialData } from './vite.repl-apps';
 import { sourceResolver } from './vite.source-resolver';
+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;
@@ -52,9 +56,45 @@ const muteWarningsPlugin = (warningsToIgnore: string[][]): Plugin => {
   };
 };
 
-export default defineConfig(async () => {
-  const { default: rehypePrettyCode } = await import('rehype-pretty-code');
+function transformerShowEmptyLines(): ShikiTransformer {
+  return {
+    line(node) {
+      if (node.children.length === 0) {
+        node.children = [{ type: 'text', value: ' ' }];
+        return node;
+      }
+    },
+  };
+}
+
+function transformerMetaShowTitle(): ShikiTransformer {
+  return {
+    root(node) {
+      const meta = this.options.meta?.__raw;
+      if (!meta) {
+        return;
+      }
+      const titleMatch = meta.match(/title="([^"]*)"/);
+      if (!titleMatch) {
+        return;
+      }
+      const title = titleMatch[1] ?? '';
+      if (title.length > 0) {
+        node.children.unshift({
+          type: 'element',
+          tagName: 'div',
+          properties: {
+            class: 'shiki-title',
+          },
+          children: [{ type: 'text', value: title }],
+        });
+      }
+      meta.replace(titleMatch[0], '');
+    },
+  };
+}
 
+export default defineConfig(async () => {
   const routesDir = resolve('src', 'routes');
   return {
     dev: {
@@ -113,46 +153,16 @@ export default defineConfig(async () => {
         mdx: {
           rehypePlugins: [
             [
-              rehypePrettyCode as any,
+              shikiRehype,
               {
                 theme: 'dark-plus',
-                onVisitLine(node: any) {
-                  // Prevent lines from collapsing in `display: grid` mode, and
-                  // allow empty lines to be copy/pasted
-                  if (node.children.length === 0) {
-                    node.children = [{ type: 'text', value: ' ' }];
-                  }
-                },
-                onVisitHighlightedLine(node: any) {
-                  // Each line node by default has `class="line"`.
-                  if (node.properties.className) {
-                    node.properties.className.push('line--highlighted');
-                  }
-                },
-                onVisitHighlightedWord(node: any, id: string) {
-                  // Each word node has no className by default.
-                  node.properties.className = ['word'];
-                  if (id) {
-                    const backgroundColor = {
-                      a: 'rgb(196 42 94 / 59%)',
-                      b: 'rgb(0 103 163 / 56%)',
-                      c: 'rgb(100 50 255 / 35%)',
-                    }[id];
-
-                    const color = {
-                      a: 'rgb(255 225 225 / 100%)',
-                      b: 'rgb(175 255 255 / 100%)',
-                      c: 'rgb(225 200 255 / 100%)',
-                    }[id];
-                    if (node.properties['data-rehype-pretty-code-wrapper']) {
-                      node.children.forEach((childNode: any) => {
-                        childNode.properties.style = ``;
-                        childNode.properties.className = '';
-                      });
-                    }
-                    node.properties.style = `background-color: ${backgroundColor}; color: ${color};`;
-                  }
-                },
+                transformers: [
+                  transformerMetaHighlight(),
+                  transformerMetaWordHighlight(),
+                  transformerColorizedBrackets(),
+                  transformerShowEmptyLines(),
+                  transformerMetaShowTitle(),
+                ],
               },
             ],
           ],