fix: race condition between HighlightJS and Mermaid

In some cases, the race condition could prevent Mermaid diagrams from being rendered.

Fix #1434
See #1298

assets/js/academic.js

@@ -396,15 +396,21 @@
     $("input[type='checkbox'][disabled]").parents('ul').addClass('task-list');
 
     // Fix Mermaid.js clash with Highlight.js.
+    // Refactor Mermaid code blocks as divs to prevent Highlight parsing them and enable Mermaid to parse them.
     let mermaids = [];
     [].push.apply(mermaids, document.getElementsByClassName('language-mermaid'));
-    for (i = 0; i < mermaids.length; i++) {
+    for (let i = 0; i < mermaids.length; i++) {
       $(mermaids[i]).unwrap('pre');  // Remove <pre> wrapper.
       $(mermaids[i]).replaceWith(function(){
         // Convert <code> block to <div> and add `mermaid` class so that Mermaid will parse it.
         return $("<div />").append($(this).contents()).addClass('mermaid');
       });
     }
+    // Initialise code highlighting if enabled for this page.
+    // Note: this block should be processed after the Mermaid code-->div conversion.
+    if (code_highlighting) {
+      hljs.initHighlighting();
+    }
 
     // Get theme variation (day/night).
     let defaultThemeVariation;

layouts/partials/site_js.html

@@ -46,7 +46,7 @@
 
     {{/* Initialise code highlighting. */}}
     {{ if $.Scratch.Get "highlight_enabled" }}
-    <script>hljs.initHighlightingOnLoad();</script>
+    <script>const code_highlighting = true;</script>
     {{ end }}
 
     {{ if ne site.Params.search.engine 0 }}