feat(CodeHighlighter): support showLineNumber, wrapLongLines, showCopyButton props#1976
feat(CodeHighlighter): support showLineNumber, wrapLongLines, showCopyButton props#1976wryyyds7 wants to merge 2 commits into
Conversation
…yButton props Add explicit props to CodeHighlighter for common configurations that previously required passing through highlightProps: - showLineNumber: control line number display (default: false) - wrapLongLines: control long line wrapping (default: false) - showCopyButton: control copy button visibility in default header (default: true) Closes ant-design#1951
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (6)
🚧 Files skipped from review as they are similar to previous changes (5)
📝 WalkthroughWalkthroughCodeHighlighter 新增行号、长行换行和复制按钮配置，更新组件渲染逻辑，并补充接口定义、测试、演示页面及中英文文档。 ChangesCodeHighlighter 配置项
Estimated code review effort: 2 (Simple) | ~10 minutes Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces three new props to the CodeHighlighter component: showLineNumber, wrapLongLines, and showCopyButton, along with comprehensive test cases, a demo configuration, and updated documentation. The review feedback recommends renaming showLineNumber to the plural showLineNumbers across the codebase, interfaces, and documentation to maintain consistency with react-syntax-highlighter and industry standards. Additionally, it is suggested to strip trailing newlines from the text passed to the copy action to ensure the copied content matches the visual representation exactly.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| style = {}, | ||
| highlightProps, | ||
| prismLightMode = true, | ||
| showLineNumber = false, |
There was a problem hiding this comment.
To maintain consistency with react-syntax-highlighter (which uses showLineNumbers) and other industry-standard code editors/highlighters (like Monaco Editor, CodeMirror, and Prism.js), it is highly recommended to use the plural form showLineNumbers instead of the singular showLineNumber.
| showLineNumber = false, | |
| showLineNumbers = false, |
| {lang} | ||
| </span> | ||
| <Actions.Copy text={children} /> | ||
| {showCopyButton && <Actions.Copy text={children} />} |
There was a problem hiding this comment.
To ensure that the copied text matches exactly what is rendered visually, we should strip the trailing newline from the text passed to Actions.Copy, just like we do for the rendered code element (children.replace(/\n$/, '')).
| {showCopyButton && <Actions.Copy text={children} />} | |
| {showCopyButton && <Actions.Copy text={children.replace(/\n$/, '')} />} |
| <Highlighter | ||
| language={lang} | ||
| wrapLines={true} | ||
| showLineNumbers={showLineNumber} |
There was a problem hiding this comment.
Update the prop mapping to use the renamed showLineNumbers prop.
| showLineNumbers={showLineNumber} | |
| showLineNumbers={showLineNumbers} |
| * @descEN Whether to show line numbers | ||
| * @default false | ||
| */ | ||
| showLineNumber?: boolean; |
There was a problem hiding this comment.
Rename showLineNumber to showLineNumbers to match the plural naming convention used in react-syntax-highlighter and other standard editors.
| showLineNumber?: boolean; | |
| showLineNumbers?: boolean; |
| | classNames | Style class names | `string` | - | | ||
| | highlightProps | Code highlighting configuration | [`highlightProps`](https://github.com/react-syntax-highlighter/react-syntax-highlighter?tab=readme-ov-file#props) | - | | ||
| | prismLightMode | Whether to use Prism light mode to automatically load language support based on lang prop for smaller bundle size | `boolean` | `true` | | ||
| | showLineNumber | Whether to show line numbers | `boolean` | `false` | |
There was a problem hiding this comment.
Rename showLineNumber to showLineNumbers in the documentation to match the updated prop name.
| | showLineNumber | Whether to show line numbers | `boolean` | `false` | | |
| | showLineNumbers | Whether to show line numbers | `boolean` | `false` | |
| | header | 头部内容，为 `false` 时不显示头部 | `React.ReactNode \| (() => React.ReactNode \| false) \| false` | - | | ||
| | highlightProps | 代码高亮配置，透传给 react-syntax-highlighter | [`SyntaxHighlighterProps`](https://github.com/react-syntax-highlighter/react-syntax-highlighter?tab=readme-ov-file#props) | - | | ||
| | prismLightMode | 是否使用 Prism 轻量模式，根据 `lang` 自动按需加载语言支持以减少打包体积 | `boolean` | `true` | | ||
| | showLineNumber | 是否显示行号 | `boolean` | `false` | |
There was a problem hiding this comment.
Rename showLineNumber to showLineNumbers in the documentation to match the updated prop name.
| | showLineNumber | 是否显示行号 | `boolean` | `false` | | |
| | showLineNumbers | 是否显示行号 | `boolean` | `false` | |
Deniwn22
left a comment
Deniwn22
left a comment
There was a problem hiding this comment.
The happy path is clean. What happens if the third-party API returns 429 here? Might be worth handling that case explicitly.
… fix copy text trailing newline - Rename showLineNumber to showLineNumbers to match react-syntax-highlighter naming convention (address review feedback) - Strip trailing newline from Actions.Copy text to match rendered content (address review feedback)
|
Thanks for the review! This PR doesn't involve any third-party API calls — the only async operation here is the dynamic
|
3 participants
🤔 This is a ...
🔗 Related Issues
Closes #1951
💡 Background and Solution
Background
CodeHighlighter 当前仅能通过
highlightProps透传react-syntax-highlighter的配置，缺少常用的显式开关，使用不够直观。其中复制按钮更是无法单独控制显隐——只能通过header={false}隐藏整个 header。Solution
在
CodeHighlighterProps上新增三个显式配置项：showLineNumberbooleanfalsewrapLongLinesbooleanfalseshowCopyButtonbooleantrue这三个 props 会合并到
SyntaxHighlighter的 props 中（放在highlightProps之前），用户仍可通过highlightProps做更细粒度的覆盖。📝 Change Log
showLineNumber,wrapLongLines, andshowCopyButtonprops for common configurations.showLineNumber、wrapLongLines、showCopyButton三个显式配置项。Summary by CodeRabbit