From 48f14e39ac81bbfb3b9913ea3ee789d775b2d1ae Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 5 Nov 2022 04:28:44 +0800
Subject: [PATCH] fix: `mermaid` occasionally fails to initialize (#536)

---
 _includes/mermaid.html | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/_includes/mermaid.html b/_includes/mermaid.html
index e89a12e..2ec8029 100644
--- a/_includes/mermaid.html
+++ b/_includes/mermaid.html
@@ -5,10 +5,11 @@
 <script src="{{ site.data.assets[origin].mermaid.js | relative_url }}"></script>
 
 <script>
-  $(function() {
+  (function () {
+
     function updateMermaid(event) {
       if (event.source === window && event.data &&
-            event.data.direction === ModeToggle.ID) {
+        event.data.direction === ModeToggle.ID) {
 
         const mode = event.data.message;
 
@@ -16,11 +17,11 @@
           return;
         }
 
-        let expectedTheme = (mode === ModeToggle.DARK_MODE? "dark" : "default");
-        let config = { theme: expectedTheme };
+        let expectedTheme = (mode === ModeToggle.DARK_MODE ? "dark" : "default");
+        let config = {theme: expectedTheme};
 
         /* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
-        $(".mermaid").each(function() {
+        $(".mermaid").each(function () {
           let svgCode = $(this).prev().children().html();
           $(this).removeAttr("data-processed");
           $(this).html(svgCode);
@@ -35,7 +36,7 @@
 
     if ($("html[data-mode=dark]").length > 0
       || ($("html[data-mode]").length == 0
-        && window.matchMedia("(prefers-color-scheme: dark)").matches ) ) {
+        && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
       initTheme = "dark";
     }
 
@@ -43,15 +44,16 @@
       theme: initTheme  /* <default|dark|forest|neutral> */
     };
 
-    /* Markdown converts to HTML */
-    $("pre").has("code.language-mermaid").each(function() {
+    /* Create mermaid tag */
+    $("pre").has("code.language-mermaid").each(function () {
       let svgCode = $(this).children().html();
       $(this).addClass("unloaded");
-      $(this).after(`<div class=\"mermaid\">${svgCode}</div>`);
+      $(this).after(`<pre class=\"mermaid\">${svgCode}</pre>`);
     });
 
     mermaid.initialize(mermaidConf);
 
     window.addEventListener("message", updateMermaid);
-  });
+  })();
+
 </script>