Skip to content

Load highlight.js asynchronously in the Content Editor

Enrique Alcántara requested to merge 339269-load-highlightjs-asynchronously into master

What does this MR do and why?

It reduces the bundle size of the Content Editor by 66% 🎉. We achieve this significant reduction by loading highlight.js language bundles asynchronously only when there are code blocks using a given language.

Before After
Webpack bundle report before this change) Webpack bundle report after this change

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

2022-03-14_11.38.29

Screenshots or screen recordings

This MR doesn’t introduce user-facing changes.

How to set up and validate locally

  1. Use the Content Editor by editing a Wiki page.
  2. 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)
  3. 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.

Related to #339269 (closed)

Edited by Enrique Alcántara

Merge request reports