✨ feat: use shikiji to replace shikiji-es

feat: use shikiji to replace shikiji-es

package.json

@@ -106,7 +106,7 @@
     "react-rnd": "^10.4.1",
     "reactflow": "^11.8.3",
     "rxjs": "^7.8.1",
-    "shiki-es": "~0.2.0",
+    "shikiji": "^0.6.12",
     "type-fest": "^3.13.1",
     "umi-request": "^1.4.0",
     "use-merge-value": "^1.2.0",

src/Highlight/components/HighLighter/index.tsx

@@ -4,6 +4,7 @@
  * 如果没有在 https://github.com/highlightjs/highlight.js/tree/master/src/languages 中查找是否支持，然后添加
  * 优先支持主流语言，没有import在代码中使用的不会打包
  */
+import { THEME_LIGHT } from '@/Highlight/theme';
 import { STUDIO_UI_PREFIX } from '@/theme';
 import { Loading3QuartersOutlined as Loading } from '@ant-design/icons';
 import classNames from 'classnames';
@@ -19,7 +20,13 @@ export type ShikiProps = Pick<
 >;
 
 const HighLighter: React.FC<ShikiProps> = (props) => {
-  const { children, lineNumber = false, theme, language, prefixCls = STUDIO_UI_PREFIX } = props;
+  const {
+    children,
+    lineNumber = false,
+    theme = THEME_LIGHT,
+    language,
+    prefixCls = STUDIO_UI_PREFIX,
+  } = props;
   const { styles } = useStyles({ prefixCls, lineNumber, theme });
   const { renderShiki, loading } = useShiki(language, theme);
 

src/Highlight/hooks/useShiki.tsx

@@ -1,12 +1,7 @@
 import { useEffect, useState } from 'react';
-import { getHighlighter, setCDN, type Highlighter } from 'shiki-es';
+import { getHighlighter, type Highlighter } from 'shikiji';
 import { themeConfig } from '../theme';
 
-// 国内使用 CDN 加速, 测试环境为 node，会加载失败
-if (process.env.NODE_ENV !== 'test') {
-  setCDN('https://npm.elemecdn.com/shiki-es/dist/assets');
-}
-
 // 目前支持的语言列表
 export const languageMap = [
   'javascript',
@@ -21,6 +16,7 @@ export const languageMap = [
   'java',
   'python',
   'sql',
+  'sh',
 ];
 
 export const useShiki = (language, theme) => {