🐛 fix: snippet style

ant-design · Feb 9, 2024 · 6c89538 · 6c89538
1 parent 14599ce
commit 6c89538
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/src/Highlight/components/HighLighter/index.tsx b/src/Highlight/components/HighLighter/index.tsx
@@ -16,7 +16,7 @@ import { useStyles } from './style';
 
 export type ShikiProps = Pick<
   HighlightProps,
-  'language' | 'children' | 'theme' | 'lineNumber' | 'shiki'
+  'language' | 'children' | 'theme' | 'lineNumber' | 'shiki' | 'className' | 'style'
 >;
 
 const HighLighter: React.FC<ShikiProps> = memo((props) => {
@@ -50,7 +50,6 @@ const HighLighter: React.FC<ShikiProps> = memo((props) => {
       {loading ? (
         <Center className={styles.center} gap={8} horizontal>
           <Loading spin className={styles.loading} />
-          Highlighting...
         </Center>
       ) : null}
     </>

diff --git a/src/Snippet/index.tsx b/src/Snippet/index.tsx
@@ -58,9 +58,11 @@ const BaseSnippet = memo<SnippetProps>((props) => {
   return (
     <div className={cx(styles.container, className)} {...rest}>
       {spotlight && <Spotlight />}
-      <HighLighter language={language} theme={isDarkMode ? 'dark' : 'light'} shiki>
-        {symbol ? [symbol, children].join(' ') : children}
-      </HighLighter>
+      <div className={styles.highlighter}>
+        <HighLighter language={language} theme={isDarkMode ? 'dark' : 'light'} shiki>
+          {symbol ? [symbol, children].join(' ') : children}
+        </HighLighter>
+      </div>
       {copyable && <CopyButton content={children} />}
     </div>
   );

diff --git a/src/Snippet/style.ts b/src/Snippet/style.ts
@@ -31,12 +31,6 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls }, { type })
           background-color: ${token.colorFillTertiary};
         }
 
-        .${prefix}-shiki {
-          position: relative;
-          overflow: hidden;
-          flex: 1;
-        }
-
         pre {
           overflow-x: auto !important;
           overflow-y: hidden !important;
@@ -57,5 +51,13 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls }, { type })
         }
       `,
     ),
+    highlighter: cx(
+      `${prefix}-highlighter`,
+      css`
+        position: relative;
+        overflow: hidden;
+        flex: 1;
+      `,
+    ),
   };
 });