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>

web_src/js/index.js

@@ -6,7 +6,8 @@ import './publicPath.js';
 import './polyfills.js';
 import './gitGraphLoader.js';
 import './semanticDropdown.js';
-import initContextPopups from './features/contextPopup';
+import initContextPopups from './features/contextPopup.js';
+import initHighlight from './features/highlight.js';
 
 import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
 
@@ -20,6 +21,7 @@ let previewFileModes;
 let simpleMDEditor;
 const commentMDEditors = {};
 let codeMirrorEditor;
+let hljs;
 
 // Disable Dropzone auto-discover because it's manually initialized
 if (typeof (Dropzone) !== 'undefined') {
@@ -2318,7 +2320,7 @@ function initTemplateSearch() {
   changeOwner();
 }
 
-$(document).ready(() => {
+$(document).ready(async () => {
   csrf = $('meta[name=_csrf]').attr('content');
   suburl = $('meta[name=_suburl]').attr('content');
 
@@ -2370,14 +2372,6 @@ $(document).ready(() => {
     window.location = $(this).data('href');
   });
 
-  // Highlight JS
-  if (typeof hljs !== 'undefined') {
-    const nodes = [].slice.call(document.querySelectorAll('pre code') || []);
-    for (let i = 0; i < nodes.length; i++) {
-      hljs.highlightBlock(nodes[i]);
-    }
-  }
-
   // Dropzone
   const $dropzone = $('#dropzone');
   if ($dropzone.length > 0) {
@@ -2591,6 +2585,10 @@ $(document).ready(() => {
       $repoName.val($cloneAddr.val().match(/^(.*\/)?((.+?)(\.git)?)$/)[3]);
     }
   });
+
+  [hljs] = await Promise.all([
+    initHighlight(),
+  ]);
 });
 
 function changeHash(hash) {