refactor: hacky workaround

PatrickJS · PatrickJS · commit 6302a9ea5188 · 2023-11-04T19:29:05.000-07:00
diff --git a/apps/website/src/root.tsx b/apps/website/src/root.tsx
@@ -63,6 +63,15 @@ export default component$(() => {
         <meta charSet="utf-8" />
         <link rel="manifest" href="/manifest.json" />
         <RouterHead />
+        <script
+          type="module"
+          dangerouslySetInnerHTML={
+            /*javascript*/ `
+            import * as shikiji from 'https://esm.sh/shikiji@0.5.0'
+            window.shikiji = shikiji;
+        `
+          }
+        />
       </head>
       <body
         lang="en"
diff --git a/apps/website/src/routes/docs/_components/highlight/highlight.tsx b/apps/website/src/routes/docs/_components/highlight/highlight.tsx
@@ -3,11 +3,10 @@ import {
   QwikIntrinsicElements,
   component$,
   useSignal,
-  useTask$,
+  useVisibleTask$,
 } from '@builder.io/qwik';
 import { OmitSignalClass } from '@qwik-ui/utils';
 import { CodeCopy } from '../code-copy/code-copy';
-import { getOrCreateHighlighter } from './get-or-create-highlighter';
 
 export type HighlightProps = OmitSignalClass<QwikIntrinsicElements['pre']> & {
   code: string;
@@ -28,8 +27,7 @@ export const Highlight = component$(
   }: HighlightProps) => {
     const codeSig = useSignal('');
 
-    useTask$(async function createHighlightedCode() {
-      const highlighter = await getOrCreateHighlighter();
+    useVisibleTask$(async function createHighlightedCode() {
       let modifiedCode: string = code;
 
       let partsOfCode = modifiedCode.split(splitCommentStart);
@@ -42,8 +40,14 @@ export const Highlight = component$(
         modifiedCode = partsOfCode[0];
       }
 
-      console.log(highlighter);
-      codeSig.value = highlighter.codeToHtml(modifiedCode, { lang: language });
+      const str = await (window as any).shikiji.codeToHtml(modifiedCode, {
+        lang: language,
+        themes: {
+          light: 'vitesse-light',
+          dark: 'vitesse-dark',
+        },
+      });
+      codeSig.value = str.toString();
     });
 
     return (
