_includes/mermaid.html in jekyll-theme-chirpy-6.5.5 vs _includes/mermaid.html in jekyll-theme-chirpy-7.1.0

@@ -1,31 +1,35 @@
 <!-- mermaid-js loader -->
 <script type="text/javascript">
-  (function () {
-    function updateMermaid(event) {
-      if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
-        const mode = event.data.message;
+  function updateMermaid(event) {
+    if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
+      const mode = event.data.message;
 
-        if (typeof mermaid === 'undefined') {
-          return;
-        }
+      if (typeof mermaid === 'undefined') {
+        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 () {
-          let svgCode = $(this).prev().children().html();
-          $(this).removeAttr('data-processed');
-          $(this).html(svgCode);
-        });
+      {%- comment -%}
+        Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344>
+      {%- endcomment -%}
+      const mermaidList = document.getElementsByClassName('mermaid');
 
-        mermaid.initialize(config);
-        mermaid.init(undefined, '.mermaid');
-      }
+      [...mermaidList].forEach((elem) => {
+        const svgCode = elem.previousSibling.children.item(0).innerHTML;
+        elem.innerHTML = svgCode;
+        elem.removeAttribute('data-processed');
+      });
+
+      mermaid.initialize(config);
+      mermaid.init(undefined, '.mermaid');
     }
+  }
 
+  (function () {
     let initTheme = 'default';
     const html = document.documentElement;
 
     if (
       (html.hasAttribute('data-mode') && html.getAttribute('data-mode') === 'dark') ||
@@ -33,26 +37,26 @@
     ) {
       initTheme = 'dark';
     }
 
     let mermaidConf = {
-      theme: initTheme /* <default|dark|forest|neutral> */
+      theme: initTheme {%- comment -%}  <default | dark | forest | neutral> {%- endcomment -%}
     };
 
-    /* Create mermaid tag */
-    document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
+    {%- comment -%} Create mermaid tag {%- endcomment -%}
+    const basicList = document.getElementsByClassName('language-mermaid');
+    [...basicList].forEach((elem) => {
       const svgCode = elem.textContent;
       const backup = elem.parentElement;
-      backup.classList.add('unloaded');
-      /* create mermaid node */
+      backup.classList.add('d-none');
+      {%- comment -%} create mermaid node {%- endcomment -%}
       let mermaid = document.createElement('pre');
       mermaid.classList.add('mermaid');
       const text = document.createTextNode(svgCode);
       mermaid.appendChild(text);
       backup.after(mermaid);
     });
 
     mermaid.initialize(mermaidConf);
-
     window.addEventListener('message', updateMermaid);
   })();
 </script>