diff --git a/src/Highlight/components/HighLighter/index.tsx b/src/Highlight/components/HighLighter/index.tsx index 65617fd2..a1d16939 100644 --- 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 = memo((props) => { @@ -50,7 +50,6 @@ const HighLighter: React.FC = memo((props) => { {loading ? (
- Highlighting...
) : null} diff --git a/src/Snippet/index.tsx b/src/Snippet/index.tsx index c121bb06..98a5c698 100644 --- a/src/Snippet/index.tsx +++ b/src/Snippet/index.tsx @@ -58,9 +58,11 @@ const BaseSnippet = memo((props) => { return (
{spotlight && } - - {symbol ? [symbol, children].join(' ') : children} - +
+ + {symbol ? [symbol, children].join(' ') : children} + +
{copyable && }
); diff --git a/src/Snippet/style.ts b/src/Snippet/style.ts index 06df9981..772663f9 100644 --- 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; + `, + ), }; });