Add line numbers and line highlight#1254
Conversation
GitHub Actions
Inactive
GitHub Actions
Inactive
GitHub Actions
Inactive
GitHub Actions
Inactive
GitHub Actions
Inactive
GitHub Actions
Inactive
There was a problem hiding this comment.
Pull Request Overview
This PR adds line numbering and line highlighting functionality to code blocks in the instructions panel, plus fixes indentation issues. The implementation uses the recommended babel-plugin-prismjs approach for webpack integration.
- Migrated from manual Prism plugin imports to babel-plugin-prismjs configuration
- Added line numbers, line highlighting, and normalize-whitespace plugins
- Configured Prism to run in manual mode with proper whitespace handling
Reviewed Changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx | Removed manual Prism plugin imports and added configuration for manual highlighting and whitespace normalization |
| package.json | Added babel-plugin-prismjs dependency |
| CHANGELOG.md | Documented the Prism configuration change |
| .babelrc | Added babel-plugin-prismjs configuration with languages, plugins, and theme settings |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 4 out of 5 changed files in this pull request and generated 1 comment.
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| "presets": ["react-app"], | ||
| "plugins": [ | ||
| [ | ||
| "prismjs", | ||
| { | ||
| "languages": ["javascript", "css", "python", "html"], | ||
| "plugins": [ | ||
| "line-numbers", | ||
| "line-highlight", | ||
| "highlight-keywords", | ||
| "normalize-whitespace" | ||
| ], | ||
| "theme": "twilight", | ||
| "css": true | ||
| } | ||
| ] | ||
| ] |
There was a problem hiding this comment.
[nitpick] The formatting is inconsistent with the original .babelrc style. The presets array was previously formatted with proper indentation and line breaks. Consider maintaining consistent formatting throughout the file.
This PR adds back in the line numbering and line highlighting (used in the editor projects for the projects site). It also fixes some indent issues in projects site editor projects.
Before:
After:
The babel plugin added in this PR is the recommended way for webpack (see this post for more info)
Changes:
InstructionsPanel.jsxInstructionsPanel.jsxto enable manual highlight triggering and configure normalise whitespace plugin to fix indentsIndent fix example:
Before:
After:
