Merge pull request #459 from thejackshelton/cloudflare-issue

fix(docs): replacing shiki with shikiji

Author: thejackshelton

apps/website/src/routes/docs/_components/highlight/get-or-create-highlighter.ts

@@ -1,10 +1,10 @@
-import { getHighlighter, type Highlighter } from 'shiki';
+import { getHighlighter, type Highlighter } from 'shikiji';
 
 let highlighter: Highlighter;
 export async function getOrCreateHighlighter() {
   if (highlighter) {
     return highlighter;
   }
-  highlighter = await getHighlighter({ theme: 'css-variables' });
+  highlighter = await getHighlighter({ themes: ['nord'], langs: ['tsx', 'css', 'html'] });
   return highlighter;
 }

apps/website/src/routes/docs/_components/highlight/highlight.tsx

@@ -42,7 +42,11 @@ export const Highlight = component$(
         modifiedCode = partsOfCode[0];
       }
 
-      codeSig.value = highlighter.codeToHtml(modifiedCode, { lang: language });
+      console.log(highlighter);
+      codeSig.value = highlighter.codeToHtml(modifiedCode, {
+        lang: language,
+        theme: 'nord',
+      });
     });
 
     return (

package.json

@@ -96,7 +96,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "sass": "^1.66.1",
-    "shiki": "0.14.4",
+    "shikiji": "0.6.10",
     "storybook": "^7.4.0",
     "storybook-framework-qwik": "^0.2.3",
     "tailwind-merge": "1.14.0",