🔧 chore: update

packages/dumi-theme-lobehub/src/builtins/SourceCode/index.tsx

@@ -1,21 +1,14 @@
 import { FC } from 'react';
 
-import { Highlighter } from '@/components/Highlighter';
-import { useSiteStore } from '@/store';
+import { Highlighter } from '@lobehub/ui';
 
 interface SourceCodeProps {
   lang: string;
   children: string;
 }
 
 const SourceCode: FC<SourceCodeProps> = ({ children, lang }) => {
-  const theme = useSiteStore((s) => s.siteData.themeConfig.syntaxTheme);
-
-  return (
-    <Highlighter syntaxThemes={theme} language={lang}>
-      {children}
-    </Highlighter>
-  );
+  return <Highlighter language={lang}>{children}</Highlighter>;
 };
 
 export default SourceCode;

src/Highlighter/Highlighter.tsx → src/Highlighter/SyntaxHighlighter/index.tsx

@@ -1,48 +1,12 @@
+import { useHighlight } from '@/hooks/useHighlight';
 import { Loading3QuartersOutlined as Loading } from '@ant-design/icons';
-import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Center } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
-
-import { useHighlight } from '@/hooks/useHighlight';
-
+import type { HighlighterProps } from '../index';
 import { Prism } from './Prism';
-
-import type { HighlighterProps } from './index';
-
-const useStyles = createStyles(({ css, token, cx, prefixCls }) => {
-  const prefix = `${prefixCls}-highlighter`;
-
-  return {
-    shiki: cx(
-      `${prefix}-shiki`,
-      css`
-        .shiki {
-          overflow-x: scroll;
-
-          .line {
-            font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
-          }
-        }
-      `,
-    ),
-    prism: css`
-      pre {
-        overflow-x: scroll;
-      }
-    `,
-
-    loading: css`
-      position: absolute;
-      top: 0;
-      right: 0;
-      color: ${token.colorTextTertiary};
-      padding: 4px 8px;
-      backdrop-filter: saturate(180%) blur(10px);
-      border-radius: ${token.borderRadiusSM};
-    `,
-  };
-});
+import { GlobalStyle } from './shikiTheme';
+import { useStyles } from './style';
 
 type SyntaxHighlighterProps = Pick<HighlighterProps, 'language' | 'children' | 'theme'>;
 
@@ -55,6 +19,7 @@ const SyntaxHighlighter = memo<SyntaxHighlighterProps>(
 
     return (
       <>
+        <GlobalStyle />
         {isLoading ? (
           <div className={styles.prism}>
             <Prism language={language} isDarkMode={isDarkMode}>

src/Highlighter/SyntaxHighlighter/shikiTheme.ts

@@ -0,0 +1,50 @@
+import { createGlobalStyle } from 'antd-style';
+
+export const GlobalStyle = createGlobalStyle`
+		:root {
+    --shiki-color-text: #EEEEEE;
+    --shiki-color-background: #333333;
+    --shiki-token-constant: #660000;
+    --shiki-token-string: #770000;
+    --shiki-token-comment: #880000;
+    --shiki-token-keyword: #990000;
+    --shiki-token-parameter: #AA0000;
+    --shiki-token-function: #BB0000;
+    --shiki-token-string-expression: #CC0000;
+    --shiki-token-punctuation: #DD0000;
+    --shiki-token-link: #EE0000;
+
+    /* Only required if using ansiToHtml function */
+    --shiki-color-ansi-black: #000000;
+    --shiki-color-ansi-black-dim: #00000080;
+    --shiki-color-ansi-red: #bb0000;
+    --shiki-color-ansi-red-dim: #bb000080;
+    --shiki-color-ansi-green: #00bb00;
+    --shiki-color-ansi-green-dim: #00bb0080;
+    --shiki-color-ansi-yellow: #bbbb00;
+    --shiki-color-ansi-yellow-dim: #bbbb0080;
+    --shiki-color-ansi-blue: #0000bb;
+    --shiki-color-ansi-blue-dim: #0000bb80;
+    --shiki-color-ansi-magenta: #ff00ff;
+    --shiki-color-ansi-magenta-dim: #ff00ff80;
+    --shiki-color-ansi-cyan: #00bbbb;
+    --shiki-color-ansi-cyan-dim: #00bbbb80;
+    --shiki-color-ansi-white: #eeeeee;
+    --shiki-color-ansi-white-dim: #eeeeee80;
+    --shiki-color-ansi-bright-black: #555555;
+    --shiki-color-ansi-bright-black-dim: #55555580;
+    --shiki-color-ansi-bright-red: #ff5555;
+    --shiki-color-ansi-bright-red-dim: #ff555580;
+    --shiki-color-ansi-bright-green: #00ff00;
+    --shiki-color-ansi-bright-green-dim: #00ff0080;
+    --shiki-color-ansi-bright-yellow: #ffff55;
+    --shiki-color-ansi-bright-yellow-dim: #ffff5580;
+    --shiki-color-ansi-bright-blue: #5555ff;
+    --shiki-color-ansi-bright-blue-dim: #5555ff80;
+    --shiki-color-ansi-bright-magenta: #ff55ff;
+    --shiki-color-ansi-bright-magenta-dim: #ff55ff80;
+    --shiki-color-ansi-bright-cyan: #55ffff;
+    --shiki-color-ansi-bright-cyan-dim: #55ffff80;
+    --shiki-color-ansi-bright-white: #ffffff;
+    --shiki-color-ansi-bright-white-dim: #ffffff80;
+  }`;

src/Highlighter/SyntaxHighlighter/style.ts

@@ -0,0 +1,35 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token, cx, prefixCls }) => {
+  const prefix = `${prefixCls}-highlighter`;
+
+  return {
+    shiki: cx(
+      `${prefix}-shiki`,
+      css`
+        .shiki {
+          overflow-x: scroll;
+
+          .line {
+            font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+          }
+        }
+      `,
+    ),
+    prism: css`
+      pre {
+        overflow-x: scroll;
+      }
+    `,
+
+    loading: css`
+      position: absolute;
+      top: 0;
+      right: 0;
+      color: ${token.colorTextTertiary};
+      padding: 4px 8px;
+      backdrop-filter: saturate(180%) blur(10px);
+      border-radius: ${token.borderRadiusSM};
+    `,
+  };
+});