fix: avoid building all the shiki lang files.

xiCO2k · Feb 19, 2024 · beff417 · beff417
1 parent 738bbc6
commit beff417
Showing 1 changed file with 21 additions and 6 deletions.
diff --git a/resources/js/shiki.js b/resources/js/shiki.js
@@ -1,22 +1,34 @@
-import { getHighlighter } from 'shiki';
+import { getHighlighterCore } from 'shiki/core'
+import getWasm from 'shiki/wasm'
 import { ref } from 'vue'
 
 export const highlighter = () => {
-    const theme = 'github-dark';
     const loaded = ref(false);
     const loading = ref(false);
     let highlighter;
 
-
     const install = async () => {
         if (highlighter || loading.value) {
             return;
         }
 
         loading.value = true;
 
-        const langs = ['html', 'php', 'js', 'json', 'vue', 'sh', 'blade'];
-        highlighter = await getHighlighter({ themes: [theme], langs });
+        highlighter = await getHighlighterCore({
+            themes: [
+                () => import('shiki/dist/themes/github-dark.mjs'),
+            ],
+            langs: [
+                () => import('shiki/dist/langs/html.mjs'),
+                () => import('shiki/dist/langs/php.mjs'),
+                () => import('shiki/dist/langs/javascript.mjs'),
+                () => import('shiki/dist/langs/json.mjs'),
+                () => import('shiki/dist/langs/vue.mjs'),
+                () => import('shiki/dist/langs/shellscript.mjs'),
+                () => import('shiki/dist/langs/blade.mjs'),
+            ],
+            loadWasm: getWasm,
+        });
 
         loaded.value = true;
         loading.value = false;
@@ -32,7 +44,10 @@ export const highlighter = () => {
             }]));
         }
 
-        return highlighter.codeToTokensBase(text, { lang, theme });
+        return highlighter.codeToTokensBase(text, {
+            lang,
+            theme: 'github-dark',
+        });
     }
 
     return { install, getLines, loaded }