diff --git a/.i18nrc.js b/.i18nrc.js index 7d0db0bc..c47ad6fa 100644 --- a/.i18nrc.js +++ b/.i18nrc.js @@ -10,5 +10,5 @@ module.exports = { entryExtension: '.zh-CN.md', outputLocales: ['en-US'], }, - modelName: 'gpt-4', + modelName: 'gpt-3.5-turbo-1106', }; diff --git a/src/Highlight/components/HighLightJS/index.tsx b/src/Highlight/components/HighLightJS/index.tsx index c6b3c860..22b4dcd4 100644 --- a/src/Highlight/components/HighLightJS/index.tsx +++ b/src/Highlight/components/HighLightJS/index.tsx @@ -14,11 +14,11 @@ import { useStyles } from './style'; export type HighLighJSProps = Pick< HighlightProps, - 'language' | 'children' | 'theme' | 'prefixCls' | 'lineNumber' + 'language' | 'children' | 'theme' | 'lineNumber' >; const HighLighJS: React.FC = memo((props) => { - const { children, lineNumber = false, theme = THEME_LIGHT, language, prefixCls } = props; + const { children, lineNumber = false, theme = THEME_LIGHT, language } = props; const [codeBlock, setCodeBlock] = useState(null); const { styles } = useStyles(theme); const { renderHighlight } = useHighlight(language); @@ -41,7 +41,7 @@ const HighLighJS: React.FC = memo((props) => { rowList.map((src, index) => { return ( - + ); }), diff --git a/src/Highlight/components/HighLighter/index.tsx b/src/Highlight/components/HighLighter/index.tsx index 866634fd..65617fd2 100644 --- a/src/Highlight/components/HighLighter/index.tsx +++ b/src/Highlight/components/HighLighter/index.tsx @@ -16,21 +16,21 @@ import { useStyles } from './style'; export type ShikiProps = Pick< HighlightProps, - 'language' | 'children' | 'theme' | 'prefixCls' | 'lineNumber' | 'shiki' + 'language' | 'children' | 'theme' | 'lineNumber' | 'shiki' >; const HighLighter: React.FC = memo((props) => { - const { children, lineNumber = false, theme = THEME_LIGHT, language, prefixCls, shiki } = props; - const { styles } = useStyles({ outPrefix: prefixCls, lineNumber, theme }); + const { children, lineNumber = false, theme = THEME_LIGHT, language, shiki = true } = props; + const { styles } = useStyles({ lineNumber, theme }); const { renderShiki, loading } = useShiki(language, theme, shiki); const HighlightJSBlock = useMemo( () => ( - + {children} ), - [lineNumber, theme, language, prefixCls, children], + [lineNumber, theme, language, children], ); return shiki === false ? ( diff --git a/src/Highlight/components/HighLighter/style.ts b/src/Highlight/components/HighLighter/style.ts index 767a8a54..c656673d 100644 --- a/src/Highlight/components/HighLighter/style.ts +++ b/src/Highlight/components/HighLighter/style.ts @@ -1,61 +1,59 @@ import { createStyles } from '../../../theme'; import { getThemeColor } from '../../theme/colors'; -export const useStyles = createStyles( - ({ css, cx, token, prefixCls }, { lineNumber, theme, outPrefix }) => { - const prefix = `${prefixCls}-${token.editorPrefix}-${outPrefix ? outPrefix : 'highlight'}`; - const { colorTextTertiary } = getThemeColor(theme === 'dark'); +export const useStyles = createStyles(({ css, cx, token, prefixCls }, { lineNumber, theme }) => { + const prefix = `${prefixCls}-${token.editorPrefix}-highlight`; + const { colorTextTertiary } = getThemeColor(theme === 'dark'); - const lineNumberStyle = css` - code { - counter-reset: step; - counter-increment: step 0; - } + const lineNumberStyle = css` + code { + counter-reset: step; + counter-increment: step 0; + } - code .line::before { - content: counter(step); - counter-increment: step; - width: 1rem; - margin-right: 1.5rem; - display: inline-block; - text-align: right; - color: rgba(115, 138, 148, 0.4); - user-select: none; - } - `; - return { - shiki: cx( - `${prefix}-shiki`, - css` - .shiki { - overflow-x: scroll; - background: none !important; - ${lineNumber ? lineNumberStyle : ''} - } - `, - ), - loading: cx(css` - color: ${colorTextTertiary}; - `), - center: cx( - css` - backdrop-filter: saturate(180%) blur(10px); - position: absolute; - top: 0; - right: 0; - display: flex; - align-items: center; - justify-content: center; + code .line::before { + content: counter(step); + counter-increment: step; + width: 1rem; + margin-right: 1.5rem; + display: inline-block; + text-align: right; + color: rgba(115, 138, 148, 0.4); + user-select: none; + } + `; + return { + shiki: cx( + `${prefix}-shiki`, + css` + .shiki { + overflow-x: scroll; + background: none !important; + ${lineNumber ? lineNumberStyle : ''} + } + `, + ), + loading: cx(css` + color: ${colorTextTertiary}; + `), + center: cx( + css` + backdrop-filter: saturate(180%) blur(10px); + position: absolute; + top: 0; + right: 0; + display: flex; + align-items: center; + justify-content: center; - height: 36px; - padding: 0 8px; + height: 36px; + padding: 0 8px; - font-family: ${token.fontFamilyCode}; - color: ${colorTextTertiary}; + font-family: ${token.fontFamilyCode}; + color: ${colorTextTertiary}; - border-radius: ${token.borderRadius}; - `, - ), - }; - }, -); + border-radius: ${token.borderRadius}; + `, + ), + }; +}); diff --git a/src/Highlight/components/HighlightCell/index.tsx b/src/Highlight/components/HighlightCell/index.tsx index 29d91a11..62c0e9a5 100644 --- a/src/Highlight/components/HighlightCell/index.tsx +++ b/src/Highlight/components/HighlightCell/index.tsx @@ -2,7 +2,6 @@ import classNames from 'classnames'; import { useStyles } from './style'; export interface HighlightCellProps { - prefixCls: string; data: { index: number; value: string }; emptyText?: string; onMouseDown?: React.MouseEventHandler; diff --git a/src/Highlight/index.en-US.md b/src/Highlight/index.en-US.md index cfc9bf17..023204de 100644 --- a/src/Highlight/index.en-US.md +++ b/src/Highlight/index.en-US.md @@ -1,36 +1,35 @@ --- title: Highlight +atomId: Highlight group: Basic --- -# Highlight Code Highlighting +# Highlight ## When to use -Use when displaying code without the need to edit it. +Use it to display code. Highlight uses [Shiki](https://github.com/shikijs/shiki) for rendering by default. Shiki uses the TextMate syntax parser for more precision, but it requires loading additional wasm files, which may result in poor performance in case of poor network conditions. If initialization fails, the component will use [highlight.js](https://highlightjs.org/) as a replacement. ## Code Demo -### auto theme +### Automatic Theme -### Specify Language +### Disable Shiki + + -You can specify the language for highlighting using `language` and the theme using `theme`. +### Specify Language ### Display Code Block Line Numbers -You can specify whether to display line numbers for the code block using `lineNumber`. - ### Theme & Language & Line Numbers & Renderer -You can view the effects of different languages in different themes through this example. - ## API Parameters @@ -39,15 +38,15 @@ You can view the effects of different languages in different themes through this | Parameter | Description | Type | Default | | :----------- | :----------------------------------------------------------------------------------------------------- | :------ | :------ | -| language | Specify the language type, see table below | string | - | +| language | Specify the language type, see the table below | string | - | | showLanguage | Whether to display the language tag | boolean | true | -| theme | Specify the theme, options: `dark`, `light`,`auto` | string | `auto` | +| theme | Specify the theme, options: `dark`, `light`, `auto` | string | `auto` | | lineNumber | Specify whether to enable line numbers for the code block, options: `true`, `false` | boolean | false | | copyable | Specify whether to display a copy button for the code block, options: `true`, `false` | boolean | true | -| height | Specify the height of the code block, for scenarios where the code block height needs to be controlled | number | - | -| type | Specify the rendering type, options: `block`, `pure` (pure mode removes container styles) | `block` | - | +| height | Specify the height of the code block, used for scenarios where the code block height needs to be fixed | number | - | +| type | Specify the rendering type, options: `block`, `pure`. In pure mode, the container style is removed | `block` | - | -### Currently Supported Language List +### Currently supported language list - javascript - typescript @@ -60,6 +59,4 @@ You can view the effects of different languages in different themes through this - python - sql -### Rendering Notes - -Highlight uses [Shiki](https://github.com/shikijs/shiki) for rendering by default. Shiki uses TextMate grammars for more precise highlighting, but it requires loading additional wasm files, which may result in poor performance in case of poor network conditions. If initialization fails, the component will use [highlight.js](https://highlightjs.org/) as a replacement renderer. +### Rendering Instructions diff --git a/src/Highlight/index.tsx b/src/Highlight/index.tsx index a796eece..927b0e92 100644 --- a/src/Highlight/index.tsx +++ b/src/Highlight/index.tsx @@ -1,3 +1,4 @@ +import { ConfigProvider } from '@ant-design/pro-editor'; import { useThemeMode } from 'antd-style'; import classNames from 'classnames'; import { createRef, memo } from 'react'; @@ -20,11 +21,6 @@ export interface HighlightProps { * @ignore */ className?: string; - /** - * @description 类名前缀 - * @ignore - */ - prefixCls?: string; /** * @title 指定语言 * @description 指定语言 @@ -73,7 +69,7 @@ export interface HighlightProps { shiki?: boolean; } -const Highlight: React.FC = memo((props) => { +const BaseHighlight: React.FC = memo((props) => { const { children, style, @@ -114,4 +110,12 @@ const Highlight: React.FC = memo((props) => { ); }); +const Highlight = (props: HighlightProps) => { + return ( + + + + ); +}; + export { HIGHLIGHT_LANGUAGES, Highlight }; diff --git a/src/Snippet/index.tsx b/src/Snippet/index.tsx index 7a79dc85..c121bb06 100644 --- a/src/Snippet/index.tsx +++ b/src/Snippet/index.tsx @@ -1,10 +1,10 @@ import HighLighter from '@/Highlight/components/HighLighter'; import CopyButton from '@/components/CopyButton'; import Spotlight from '@/components/Spotlight'; +import { ConfigProvider } from '@ant-design/pro-editor'; import { useThemeMode } from 'antd-style'; import { memo } from 'react'; import { DivProps } from 'react-layout-kit'; -import { ConfigProvider } from '..'; import { useStyles } from './style'; export interface SnippetProps extends DivProps { @@ -36,11 +36,9 @@ export interface SnippetProps extends DivProps { * @default 'ghost' */ type?: 'ghost' | 'block'; - - prefixCls?: string; } -const Snippet = memo((props) => { +const BaseSnippet = memo((props) => { const { symbol = '$', language = 'tsx', @@ -51,22 +49,29 @@ const Snippet = memo((props) => { className, ...rest } = props; - const { isDarkMode } = useThemeMode(); + const { isDarkMode } = useThemeMode(); const { styles, cx } = useStyles({ type, }); + + return ( +
+ {spotlight && } + + {symbol ? [symbol, children].join(' ') : children} + + {copyable && } +
+ ); +}); + +const Snippet = (props: SnippetProps) => { return ( -
- {spotlight && } - - {symbol ? [symbol, children].join(' ') : children} - - {copyable && } -
+ ); -}); +}; export { Snippet }; diff --git a/src/index.ts b/src/index.ts index ebe57dc9..1b5c40bd 100644 --- a/src/index.ts +++ b/src/index.ts @@ -15,8 +15,6 @@ export { default as FreeCanvas } from './FreeCanvas'; export type { FreeCanvasProps } from './FreeCanvas'; export * from './Highlight'; export * from './IconPicker'; -export { default as InteractContainer } from './InteractContainer'; -export type { CanvasInteractRule, InteractStatus, InteractStatusNode } from './InteractContainer'; export { Layout as EditorLayout } from './Layout'; export { default as Markdown, type MarkdownProps } from './Markdown'; export * from './ProBuilder';