Add block text highlighting in instruction panel

[cocomarine]

Closes https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/1690

Block-type text highlighting

• Used rpf-markdown-core (built by the Code Club team) for rendering instructions, chosen for its inline Kramdown class support.
• Refactored the css file so that they apply to both light and dark mode without breaking others.

Before	After

Prism and other fixes

• While doing this work, I found Prism had stopped working possibly due to the partial Vite migration. Prism provides syntax highlighting, line numbering and line highlighting in code blocks of instructions. Classroom and ExpCS instructions don't use these currently, but CCP instructions do (and CCP team also noticed this when running projects site locally along with latest editor-ui).
  

• The existing vite.lib.js configured babel-plugin-prismjs via @vitejs/plugin-react's babel option. But the plugin-react v6 no longer has, so the config was ignored. Replaced with explicit imports in src/utils/prism.js.

• In dev environment, vite-plugin-node-polyfills prepends a shim banner to every pre-bundled dependency without terminating the last statement. Prism's plugin files start with (function(){…})(), so it was parsed as an argument to the shim and then short-circuited away, resulting in line-numbers and line-highlight not registered. Worked around with optimizeDeps.exclude in vite.config.js.

• Jest couldn't load any test importing rpf-markdown-core. Its CJS build requires marked and scratchblocks, both ESM-only with no CommonJS entry. Updated transformIgnorePatterns to exempt both, matched against the full path so the nested rpf-markdown-core/node_modules/scratchblocks copy is also covered.

Can our users use any other features that the rpf-markdown-core provides?

• Not yet. There are some styling issues with others which we need to address first.
• CCP team is also open to collaboration if we require certain set of functionalities from or improvements to the library.

Spacing issues	issues with dark mode

[Copilot]

Pull request overview

This PR updates the instructions rendering pipeline to support block-type (scratchblocks-style) inline code highlighting via Kramdown-style class attributes, while also restoring Prism syntax highlighting behavior that was impacted during the Vite migration.

Changes:

• Switch instruction markdown rendering from marked to @raspberrypifoundation/rpf-markdown-core to support inline class attributes.
• Replace the prior babel-plugin-prismjs build-time Prism injection with explicit runtime Prism imports/config in src/utils/prism.js.
• Adjust Vite dev dependency optimization and Jest transforms to accommodate Prism plugin behavior and ESM-only transitive deps used by rpf-markdown-core.

Reviewed changes

Copilot reviewed 13 out of 15 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
yarn.lock	Adds @raspberrypifoundation/rpf-markdown-core and related dependency graph changes; removes babel-plugin-prismjs/marked entries.
package.json	Adds @raspberrypifoundation/rpf-markdown-core; removes direct marked and babel-plugin-prismjs deps.
vite.lib.js	Removes @vitejs/plugin-react Babel prism injection now that Prism setup is explicit in source.
vite.config.js	Excludes specific Prism plugins from optimizeDeps to avoid dev-time prebundle issues.
src/utils/prism.js	Centralizes Prism language/plugin registration and runtime configuration (manual mode, whitespace defaults, hook).
src/utils/prism.test.js	Adds tests asserting Prism setup and verifying rpf-markdown-core fences produce line numbers/highlights.
src/containers/WebComponentLoader.jsx	Removes legacy window.Prism → window.syntaxHighlight bridging script.
src/containers/WebComponentLoader.test.jsx	Removes assertions/mocks related to the removed window.syntaxHighlight bridge.
src/components/Menus/Sidebar/InstructionsPanel/InstructionsStep/InstructionsStep.jsx	Uses rpf-markdown-core for markdown rendering; uses shared Prism utility; post-processes links for target/rel.
src/components/Menus/Sidebar/InstructionsPanel/InstructionsStep/InstructionsStep.test.jsx	Updates tests for new Prism import and adds coverage for inline code class attachment behavior.
src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.jsx	Removes direct Prism mocking and a Prism assertion tied to the prior behavior.
src/assets/stylesheets/Instructions.scss	Refactors scratchblock inline code colour rules using the shared category map and adjusts dark-mode specificity.
src/assets/stylesheets/_scratch_colours.scss	Introduces $scratch-block-categories mapping used to generate scratchblock class styles.
jest.config.js	Updates transformIgnorePatterns to ensure Jest transforms marked and scratchblocks as required by rpf-markdown-core’s CJS build.
.babelrc	Removes Prism Babel plugin configuration, leaving only the CRA preset.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[zetter-rpf]

Nice one, I appreciate the time you've taken to understand RPF markdown and prism and to improve instructions as a whole.

Added a few comments, the only thing that might be a blocker to merging is the change in how links are rendered

[maxelkins]

@cocomarine could we look at adding some more user friendly class names - happy to discuss this. Can also do in a follow up PR