Support inline fenceposts for mermaid

HL7 · May 23, 2024 · 063693e · 063693e
1 parent 792db42
commit 063693e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/content/assets/js/mermaid-init.js b/content/assets/js/mermaid-init.js
@@ -1,3 +1,12 @@
-mermaid.initialize({
-  securityLevel: 'sandbox',
+document.addEventListener('DOMContentLoaded', function() {
+  const mermaidCodes = document.querySelectorAll('pre.language-mermaid code.language-mermaid');
+  Array.from(mermaidCodes).forEach(function(code) {
+    const pre = code.parentNode;
+    const content = code.textContent;
+    const mermaidDiv = document.createElement('div');
+    mermaidDiv.className = 'mermaid';
+    mermaidDiv.textContent = content;
+    pre.parentNode.replaceChild(mermaidDiv, pre);
+  });
+  mermaid.initialize({ securityLevel: 'sandbox' });
 });
diff --git a/includes/fragment-pagebegin.html b/includes/fragment-pagebegin.html
@@ -38,7 +38,8 @@
   <body onload="document.body.style.opacity='1'">
 {% assign label = {{site.data.pages[page.path].label}} | split: '.0' %}
 	  <script src="{{site.data.info.assets}}assets/js/prism.js"></script>
-
+    <script type="text/javascript" src="{{site.data.info.assets}}assets/js/mermaid.js"></script>
+    <script type="text/javascript" src="{{site.data.info.assets}}assets/js/mermaid-init.js"></script>
     <style type="text/css">h2{--heading-prefix:"{{site.data.info.headingOffset}}{{label}}"}
     h3,h4,h5,h6{--heading-prefix:"{{site.data.info.headingOffset}}{{site.data.pages[page.path].label}}"}</style>
     <div id="segment-header" class="segment">  <!-- segment-header -->

diff --git a/includes/fragment-pageend.html b/includes/fragment-pageend.html
@@ -66,8 +66,6 @@
   <script type="text/javascript" src="assets/js/clipboard.min.js"> </script>
   <script type="text/javascript" src="assets/js/clipboard-btn.js"> </script>
   <script type="text/javascript" src="{{site.data.info.assets}}assets/js/anchor-hover.js"> </script>
-  <script type="text/javascript" src="{{site.data.info.assets}}assets/js/mermaid.js"> </script>
-  <script type="text/javascript" src="{{site.data.info.assets}}assets/js/mermaid-init.js"> </script>
   <!-- Analytics Below
   ================================================== -->
   </body>