🔥 feat: migrate shiki

package.json

@@ -73,7 +73,7 @@
     "rc-footer": "^0.6",
     "react-layout-kit": "^1",
     "react-syntax-highlighter": "^15",
-    "shiki-es": "^0.2",
+    "shiki": "^1.2.0",
     "swr": "^2.2.5",
     "use-merge-value": "^1",
     "zustand": "^4.4.1",

src/components/Highlighter/Highlighter.tsx

@@ -31,25 +31,21 @@ const SyntaxHighlighter = memo<SyntaxHighlighterProps>(
         );
       default:
       case 'shiki':
-        return (
+        return loading ? (
           <>
-            {loading ? (
-              <Prism language={language}>{children}</Prism>
-            ) : (
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: codeToHtml(children, language, isDarkMode) || '',
-                }}
-                className={styles.shiki}
-              />
-            )}
-            {loading && (
-              <Center horizontal gap={8} className={styles.loading}>
-                <Loading spin style={{ color: theme.colorTextTertiary }} />
-                shiki 着色器准备中...
-              </Center>
-            )}
+            <Prism language={language}>{children}</Prism>
+            <Center horizontal gap={8} className={styles.loading}>
+              <Loading spin style={{ color: theme.colorTextTertiary }} />
+              shiki 着色器准备中...
+            </Center>
           </>
+        ) : (
+          <div
+            dangerouslySetInnerHTML={{
+              __html: codeToHtml(children, language, isDarkMode) ?? '',
+            }}
+            className={styles.shiki}
+          />
         );
     }
   },

src/components/Highlighter/useShiki.ts

@@ -1,12 +1,13 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { Highlighter, Theme, getHighlighter, setCDN } from 'shiki-es';
+import type { BundledTheme, Highlighter, HighlighterGeneric } from 'shiki';
+import { createHighlighter } from 'shiki';
 import useControlledState from 'use-merge-value';
 
 import { languageMap } from './language';
 
 export interface ShikiSyntaxTheme {
-  dark: Theme;
-  light: Theme;
+  dark: BundledTheme;
+  light: BundledTheme;
 }
 
 export interface ShikiOptions {
@@ -15,9 +16,6 @@ export interface ShikiOptions {
   theme?: Partial<ShikiSyntaxTheme>;
 }
 
-// 使用 element cdn 提升加载速度
-setCDN('https://npm.elemecdn.com/shiki-es/dist/assets');
-
 const defaultTheme: ShikiSyntaxTheme = {
   dark: 'github-dark',
   light: 'github-light',
@@ -27,12 +25,12 @@ export const useShiki = ({ onLoadingChange, theme }: ShikiOptions) => {
   const mergeTheme = useMemo(() => ({ ...defaultTheme, ...theme }), [theme]);
   const [THEME] = useControlledState(defaultTheme, { value: mergeTheme });
 
-  const shikiRef = useRef<Highlighter | null>(null);
+  const shikiRef = useRef<HighlighterGeneric<any, any> | null>(null);
 
   const initHighlighter = async (theme: ShikiSyntaxTheme) => {
     onLoadingChange?.(true);
 
-    shikiRef.current = await getHighlighter({
+    shikiRef.current = await createHighlighter({
       langs: Object.keys(languageMap) as any,
       themes: Object.values(theme),
     });
@@ -49,7 +47,7 @@ export const useShiki = ({ onLoadingChange, theme }: ShikiOptions) => {
     (text: string, language: any, isDarkMode: boolean) => {
       try {
         return (
-          shikiRef.current?.codeToHtml(text, {
+          shikiRef.current!.codeToHtml(text, {
             lang: language,
             theme: isDarkMode ? THEME.dark : THEME.light,
           }) || ''