fix: shiki code highlight use async import

src/views/about/index.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-// @ts-ignore
-import { codeToHtml } from 'https://cdn.jsdelivr.net/npm/shiki@3.7.0/+esm'
 import { NCard, NSplit, NButton, NScrollbar, NTag } from 'naive-ui'
 import { ref, watch } from 'vue'
 
@@ -11,6 +9,8 @@ defineOptions({
   name: 'About',
 })
 
+let codeToHtml: any
+
 const APP_NAME = import.meta.env.VITE_APP_NAME
 
 const { isDark } = usePersonalization()
@@ -149,28 +149,28 @@ const dir = `📂 lithe-admin
 
 watch(
   isDark,
-  async (isDark) => {
-    directoryStructureHighlight.value = await codeToHtml(dir, {
-      lang: 'markdown',
-      theme: isDark ? 'dark-plus' : 'min-light',
-    })
+  async () => {
+    if (!codeToHtml) {
+      // @ts-ignore
+      const shiki = await import('https://cdn.jsdelivr.net/npm/shiki@3.7.0/+esm')
+      codeToHtml = shiki.codeToHtml
+    }
 
-    dependenciesCodeHighlight.value = await codeToHtml(JSON.stringify(dependencies, null, 2), {
-      lang: 'json',
-      theme: isDark ? 'dark-plus' : 'min-light',
-    })
+    const theme = isDark.value ? 'dark-plus' : 'min-light'
 
-    devDependenciesCodeHighlight.value = await codeToHtml(
-      JSON.stringify(devDependencies, null, 2),
-      {
-        lang: 'json',
-        theme: isDark ? 'dark-plus' : 'min-light',
-      },
-    )
-  },
-  {
-    immediate: true,
+    codeToHtml(dir, { lang: 'markdown', theme })
+      .then((result: string) => (directoryStructureHighlight.value = result))
+      .catch(() => (directoryStructureHighlight.value = dir))
+
+    codeToHtml(JSON.stringify(dependencies, null, 2), { lang: 'json', theme })
+      .then((result: string) => (dependenciesCodeHighlight.value = result))
+      .catch(() => (dependenciesCodeHighlight.value = JSON.stringify(dependencies, null, 2)))
+
+    codeToHtml(JSON.stringify(devDependencies, null, 2), { lang: 'json', theme })
+      .then((result: string) => (devDependenciesCodeHighlight.value = result))
+      .catch(() => (devDependenciesCodeHighlight.value = JSON.stringify(devDependencies, null, 2)))
   },
+  { immediate: true },
 )
 </script>
 <template>

src/views/data-show/data-form/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-// @ts-ignore
-import { codeToHtml } from 'https://cdn.jsdelivr.net/npm/shiki@3.7.0/+esm'
+
 import {
   NCard,
   NForm,
@@ -45,6 +44,8 @@ defineOptions({
   name: 'DataForm',
 })
 
+let codeToHtml: any
+
 const { isDark } = usePersonalization()
 
 const message = useMessage()
@@ -190,15 +191,21 @@ watch(
   async (newVal) => {
     const [form, isDark] = newVal
 
-    formCodeHighlight.value = await codeToHtml(JSON.stringify(form, null, 2), {
-      lang: 'json',
-      theme: isDark ? 'dark-plus' : 'min-light',
-    })
+    if (!codeToHtml) {
+      // @ts-ignore
+      const shiki = await import('https://cdn.jsdelivr.net/npm/shiki@3.7.0/+esm')
+      codeToHtml = shiki.codeToHtml
+    }
 
-    rulesCodeHighlight.value = await codeToHtml(JSON.stringify(rules, null, 2), {
-      lang: 'json',
-      theme: isDark ? 'dark-plus' : 'min-light',
-    })
+    const theme = isDark ? 'dark-plus' : 'min-light'
+
+    codeToHtml(JSON.stringify(form, null, 2), { lang: 'json', theme })
+      .then((result: string) => (formCodeHighlight.value = result))
+      .catch(() => (formCodeHighlight.value = JSON.stringify(form, null, 2)))
+
+    codeToHtml(JSON.stringify(rules, null, 2), { lang: 'json', theme })
+      .then((result: string) => (rulesCodeHighlight.value = result))
+      .catch(() => (rulesCodeHighlight.value = JSON.stringify(rules, null, 2)))
   },
   {
     immediate: true,

src/views/drag-drop/index.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-// @ts-ignore
-import { codeToHtml } from 'https://cdn.jsdelivr.net/npm/shiki@3.7.0/+esm'
 import { NAlert, NCard, NSplit, NScrollbar, NButton } from 'naive-ui'
 import { ref, watch } from 'vue'
 import { VueDraggable } from 'vue-draggable-plus'
@@ -14,6 +12,8 @@ defineOptions({
   name: 'DragDrop',
 })
 
+let codeToHtml: any
+
 const APP_NAME = import.meta.env.VITE_APP_NAME
 
 const { isDark } = usePersonalization()
@@ -71,18 +71,26 @@ watch(
   [baseList, gridList, cloneTaskList, isDark],
   async (newVal) => {
     const [baseList, gridList, cloneList2, isDark] = newVal
-    baseListCodeHighlight.value = await codeToHtml(JSON.stringify(baseList, null, 2), {
-      lang: 'json',
-      theme: isDark ? 'dark-plus' : 'min-light',
-    })
-    gridListCodeHighlight.value = await codeToHtml(JSON.stringify(gridList, null, 2), {
-      lang: 'json',
-      theme: isDark ? 'dark-plus' : 'min-light',
-    })
-    cloneList2CodeHighlight.value = await codeToHtml(JSON.stringify(cloneList2, null, 2), {
-      lang: 'json',
-      theme: isDark ? 'dark-plus' : 'min-light',
-    })
+
+    if (!codeToHtml) {
+      // @ts-ignore
+      const shiki = await import('https://cdn.jsdelivr.net/npm/shiki@3.7.0/+esm')
+      codeToHtml = shiki.codeToHtml
+    }
+
+    const theme = isDark ? 'dark-plus' : 'min-light'
+
+    codeToHtml(JSON.stringify(baseList, null, 2), { lang: 'json', theme })
+      .then((result: string) => (baseListCodeHighlight.value = result))
+      .catch(() => (baseListCodeHighlight.value = JSON.stringify(baseList, null, 2)))
+
+    codeToHtml(JSON.stringify(gridList, null, 2), { lang: 'json', theme })
+      .then((result: string) => (gridListCodeHighlight.value = result))
+      .catch(() => (gridListCodeHighlight.value = JSON.stringify(gridList, null, 2)))
+
+    codeToHtml(JSON.stringify(cloneList2, null, 2), { lang: 'json', theme })
+      .then((result: string) => (cloneList2CodeHighlight.value = result))
+      .catch(() => (cloneList2CodeHighlight.value = JSON.stringify(cloneList2, null, 2)))
   },
   {
     immediate: true,