Add line numbers and line highlight (#1254)

Author: rammodhvadia

.babelrc

@@ -1,5 +1,19 @@
 {
-  "presets": [
-    "react-app",
+  "presets": ["react-app"],
+  "plugins": [
+    [
+      "prismjs",
+      {
+        "languages": ["javascript", "css", "python", "html"],
+        "plugins": [
+          "line-numbers",
+          "line-highlight",
+          "highlight-keywords",
+          "normalize-whitespace"
+        ],
+        "theme": "twilight",
+        "css": true
+      }
+    ]
   ]
 }

CHANGELOG.md

@@ -7,11 +7,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ## Unreleased
 
 ### Added
+
 - Sidebar plugin functionality (#1251)
 
 ### Changed
 
 - Changed `set_pixel` to quantise the colour before writing (#1247)
+- Changed Prism config to use babel plugin enabling line highlighting and numbering (#1254)
 
 ## [0.31.1] - 2025-09-19
 

package.json

@@ -121,6 +121,7 @@
     "babel-jest": "^29.1.2",
     "babel-loader": "^8.2.5",
     "babel-plugin-named-asset-import": "^0.3.7",
+    "babel-plugin-prismjs": "^2.1.0",
     "babel-preset-react-app": "^10.0.1",
     "bfj": "^7.0.2",
     "camelcase": "^6.1.0",

src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx

@@ -8,21 +8,27 @@ import { Tabs, TabList, Tab, TabPanel } from "react-tabs";
 
 import ProgressBar from "./ProgressBar/ProgressBar";
 import "../../../../assets/stylesheets/Instructions.scss";
-import "prismjs/plugins/highlight-keywords/prism-highlight-keywords.js";
-import "prismjs/plugins/line-highlight/prism-line-highlight";
-import "prismjs/plugins/line-numbers/prism-line-numbers.css";
-import "prismjs/plugins/line-highlight/prism-line-highlight.css";
 import { quizReadyEvent } from "../../../../events/WebComponentCustomEvents";
 import { setCurrentStepPosition } from "../../../../redux/InstructionsSlice";
 import DesignSystemButton from "../../../DesignSystemButton/DesignSystemButton";
 import { setProjectInstructions } from "../../../../redux/EditorSlice";
 import demoInstructions from "../../../../assets/markdown/demoInstructions.md";
 import RemoveInstructionsModal from "../../../Modals/RemoveInstructionsModal";
 import Prism from "prismjs";
-import "prismjs/components/prism-python";
 import populateMarkdownTemplate from "../../../../utils/populateMarkdownTemplate";
 
 const InstructionsPanel = () => {
+  useEffect(() => {
+    // prism and prism plugin config
+    Prism.manual = true;
+    if (Prism.plugins.NormalizeWhitespace) {
+      Prism.plugins.NormalizeWhitespace.setDefaults({
+        "remove-indent": false,
+        "remove-initial-line-feed": true,
+        "left-trim": false,
+      });
+    }
+  }, []);
   const [showModal, setShowModal] = useState(false);
   const instructionsEditable = useSelector(
     (state) => state.editor?.instructionsEditable,

yarn.lock

@@ -2781,6 +2781,7 @@ __metadata:
     babel-jest: ^29.1.2
     babel-loader: ^8.2.5
     babel-plugin-named-asset-import: ^0.3.7
+    babel-plugin-prismjs: ^2.1.0
     babel-preset-react-app: ^10.0.1
     bfj: ^7.0.2
     camelcase: ^6.1.0
@@ -5411,6 +5412,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-prismjs@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "babel-plugin-prismjs@npm:2.1.0"
+  peerDependencies:
+    prismjs: ^1.18.0
+  checksum: 8bc59ca46b493cb255ec914e26a0dd39c1aaee881e3701d6726db40152d4a176a96ac1438f80b0d705b188bee4106538de809bc79dff9774400da3d8331affce
+  languageName: node
+  linkType: hard
+
 "babel-plugin-syntax-object-rest-spread@npm:^6.8.0":
   version: 6.13.0
   resolution: "babel-plugin-syntax-object-rest-spread@npm:6.13.0"