Load highlight.js asynchronously in the Content Editor
What does this MR do and why?
It reduces the bundle size of the Content Editor by 66%
Before | After |
---|---|
) |
How does this change work?
The Content Editor detects code blocks declared in a Markdown document. It identifies the programming languages used in those code blocks and loads the respective highlight.js language bundles.
When declaring a new code block in the Content Editor, the Code Block Highlight extension will also download new language bundles on demand
Screenshots or screen recordings
This MR doesn’t introduce user-facing changes.
How to set up and validate locally
- Use the Content Editor by editing a Wiki page.
- The first test is creating code blocks by writing Markdown using the "Edit source" mode. Then, switch to "Edit rich text" mode. The code blocks should have syntax highlight for the languages you specify (as long as highlight.js supports them)
- The second test is creating a code block in Rich text mode as indicated in the Gif above.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #339269 (closed)