Merge pull request #461 from thejackshelton/cloudflare-issue

fix(docs): back to shiki instead of shikiji

Author: thejackshelton

apps/website/src/_state/app-state.type.ts

@@ -1,5 +1,5 @@
 import { NoSerialize } from '@builder.io/qwik';
-import type { Highlighter } from 'shikiji';
+import type { Highlighter } from 'shiki';
 
 export interface AppState {
   mode: 'light' | 'dark';

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

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

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

@@ -43,10 +43,7 @@ export const Highlight = component$(
       }
 
       console.log(highlighter);
-      codeSig.value = highlighter.codeToHtml(modifiedCode, {
-        lang: language,
-        theme: 'nord',
-      });
+      codeSig.value = highlighter.codeToHtml(modifiedCode, { lang: language });
     });
 
     return (

package.json

@@ -96,7 +96,6 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "sass": "^1.66.1",
-    "shikiji": "0.6.10",
     "storybook": "^7.4.0",
     "storybook-framework-qwik": "^0.2.3",
     "tailwind-merge": "1.14.0",
@@ -126,6 +125,7 @@
   ],
   "dependencies": {
     "@fontsource-variable/inter": "5.0.8",
+    "shiki": "0.14.5",
     "tslib": "^2.6.2"
   },
   "nx": {