move highlight.js to npm/webpack (#10011)

- introduced window.config to help with js-based lazy-loading
- adjusted webpack chunk naming to avoid 'vendors~name.js' that webpack
  defaults to for vendor chunks.
- added theme class to html and prefixed all selectors. this is
  neccesary so that the theme styles win over the lazy-loaded ones.

Co-authored-by: zeripath <art27@cantab.net>

1 files changed, 12 insertions, 0 deletions

diff --git a/web_src/js/features/highlight.js b/web_src/js/features/highlight.js
new file mode 100644
index 0000000000..dcd8a8d21e
--- /dev/null
+++ b/web_src/js/features/highlight.js
@@ -0,0 +1,12 @@
+export default async function initHighlight() {
+  if (!window.config || !window.config.HighlightJS) return;
+
+  const hljs = await import(/* webpackChunkName: "highlight" */'highlight.js');
+
+  const nodes = [].slice.call(document.querySelectorAll('pre code') || []);
+  for (let i = 0; i < nodes.length; i++) {
+    hljs.highlightBlock(nodes[i]);
+  }
+
+  return hljs;
+}