✨ feat: remove highlight.js and use shiki

package.json

@@ -73,7 +73,6 @@
     "copy-to-clipboard": "^3.3.3",
     "diff": "^5.1.0",
     "fast-deep-equal": "^3.1.3",
-    "highlight.js": "~10.5.0",
     "immer": "^9.0.21",
     "lodash.flatten": "^4.4.0",
     "lodash.get": "^4.4.2",
@@ -102,7 +101,7 @@
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
     "rxjs": "^7.8.1",
-    "shikiji": "^0.6.13",
+    "shiki": "^1.2.0",
     "type-fest": "^3.13.1",
     "use-merge-value": "^1.2.0",
     "yjs": "^13.6.11",

src/Highlight/components/HighLighter/index.tsx

@@ -7,46 +7,30 @@
 import { THEME_LIGHT } from '@/Highlight/theme';
 import { Loading3QuartersOutlined as Loading } from '@ant-design/icons';
 import classNames from 'classnames';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { Center } from 'react-layout-kit';
 import { useShiki } from '../../hooks/useShiki';
 import { HighlightProps } from '../../index';
-import HighLightJS from '../HighLightJS';
 import { useStyles } from './style';
 
 export type ShikiProps = Pick<
   HighlightProps,
-  'language' | 'children' | 'theme' | 'lineNumber' | 'shiki' | 'className' | 'style'
+  'language' | 'children' | 'theme' | 'lineNumber' | 'className' | 'style'
 >;
 
 const HighLighter: React.FC<ShikiProps> = memo((props) => {
-  const { children, lineNumber = false, theme = THEME_LIGHT, language, shiki = true } = props;
+  const { children, lineNumber = false, theme = THEME_LIGHT, language } = props;
   const { styles } = useStyles({ lineNumber, theme });
-  const { renderShiki, loading } = useShiki(language, theme, shiki);
+  const { renderShiki, loading } = useShiki(language, theme);
 
-  const HighlightJSBlock = useMemo(
-    () => (
-      <HighLightJS lineNumber={lineNumber} theme={theme} language={language}>
-        {children}
-      </HighLightJS>
-    ),
-    [lineNumber, theme, language, children],
-  );
-
-  return shiki === false ? (
-    HighlightJSBlock
-  ) : (
+  return (
     <>
-      {loading ? (
-        HighlightJSBlock
-      ) : (
-        <div
-          className={classNames(styles.shiki)}
-          dangerouslySetInnerHTML={{
-            __html: renderShiki(children) || '',
-          }}
-        />
-      )}
+      <div
+        className={classNames(styles.shiki)}
+        dangerouslySetInnerHTML={{
+          __html: renderShiki(children) || '',
+        }}
+      />
       {loading ? (
         <Center className={styles.center} gap={8} horizontal>
           <Loading spin className={styles.loading} />

src/Highlight/demos/lineNumber.tsx

@@ -1,7 +1,3 @@
-/**
-
- */
-
 import { Highlight } from '@ant-design/pro-editor';
 
 export default () => (

src/Highlight/demos/theme.tsx

@@ -1,7 +1,3 @@
-/**
-
- */
-
 import { Highlight } from '@ant-design/pro-editor';
 import { Select, Space } from 'antd';
 import { useState } from 'react';

src/Highlight/hooks/useShiki.tsx

@@ -1,12 +1,27 @@
 import { useEffect, useState } from 'react';
-import { getHighlighter, type Highlighter } from 'shikiji';
+import { getHighlighter, type Highlighter } from 'shiki/bundle/web';
 import { themeConfig } from '../theme';
-import { languageMap } from './useHighlight';
 
 // 目前支持的语言列表
-export const HIGHLIGHT_LANGUAGES = Object.keys(languageMap);
+export const HIGHLIGHT_LANGUAGES = [
+  'javascript',
+  'typescript',
+  'css',
+  'json',
+  'markdown',
+  'xml',
+  'html',
+  'yaml',
+  'tsx',
+  'jsx',
+  'java',
+  'python',
+  'sql',
+  'bash',
+  'sh',
+];
 
-export const useShiki = (language, theme, isShiki) => {
+export const useShiki = (language, theme) => {
   const [shiki, setShiki] = useState<Highlighter>(null);
 
   const initShiki = async () => {
@@ -18,8 +33,8 @@ export const useShiki = (language, theme, isShiki) => {
   };
 
   useEffect(() => {
-    if (isShiki) initShiki();
-  }, [isShiki]);
+    initShiki();
+  }, []);
 
   const renderShiki = (content) => {
     if (shiki && shiki.getLoadedLanguages().includes(language)) {

src/Highlight/index.en-US.md

@@ -6,14 +6,12 @@ group: Basic
 
 # Highlight
 
-Used to display code, Highlight defaults to using [Shiki](https://github.com/shikijs/shiki) for rendering. Shiki uses a TextMate grammar for more precision, but it requires loading additional wasm files, which may result in a poor experience in case of poor network conditions. If initialization fails, the component will set the renderer to [highlight.js](https://highlightjs.org/) as a replacement.
+Used to display code, Highlight defaults to using [Shiki](https://github.com/shikijs/shiki) for rendering. Shiki uses a TextMate grammar for more precision.
 
 ## Code Demo
 
 <code src="./demos/auto.tsx" title="Automatic Theme" description="By default, `auto` is enabled, which will automatically switch themes based on the current environment"></code>
 
-<code src="./demos/shiki.tsx"  title="Disable Shiki" description="By default, `shiki` rendering is enabled, but it can be disabled by setting `shiki=false` in weak or no network situations"></code>
-
 <code src="./demos/basic.tsx" title="Specify Language and Theme" description="You can specify the language for highlighting using `language` and the highlighting theme using `theme`"></code>
 
 <code src="./demos/lineNumber.tsx"  title="Display Code Block Line Numbers"

src/Highlight/index.tsx

@@ -63,10 +63,6 @@ export interface HighlightProps {
    * 是否需默认展示语言种类
    */
   showLanguage?: boolean;
-  /**
-   * Shiki 高亮组件
-   */
-  shiki?: boolean;
 }
 
 const BaseHighlight: React.FC<HighlightProps> = memo((props) => {
@@ -78,7 +74,6 @@ const BaseHighlight: React.FC<HighlightProps> = memo((props) => {
     copyable = true,
     theme: outTheme = THEME_AUTO,
     language = 'tsx',
-    shiki = true,
     showLanguage = true,
     type = 'block',
     onCopy,
@@ -103,7 +98,7 @@ const BaseHighlight: React.FC<HighlightProps> = memo((props) => {
       {showLanguage && language && (
         <LanguageTag theme={theme}>{language.toLowerCase()}</LanguageTag>
       )}
-      <HighLighter lineNumber={lineNumber} language={language} theme={theme} shiki={shiki}>
+      <HighLighter lineNumber={lineNumber} language={language} theme={theme}>
         {children}
       </HighLighter>
     </div>