FEAT: mermaid support (#5)

dev-onejun · web-flow · commit 8c07af3c4607 · 2024-12-06T22:29:38.000-06:00
diff --git a/_includes/mermaid_support.html b/_includes/mermaid_support.html
@@ -0,0 +1,25 @@
+<!-- Load Mermaid.js from a CDN -->
+<script src="https://unpkg.com/mermaid@11/dist/mermaid.min.js"></script>
+
+<!-- Initialize Mermaid when the page loads -->
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+    // Select all code blocks with 'language-mermaid'
+    document.querySelectorAll('pre code.language-mermaid').forEach(function(codeBlock) {
+        // Extract the mermaid code
+        const mermaidCode = codeBlock.textContent.trim();
+
+        // Create a new div with class 'mermaid'
+        const mermaidDiv = document.createElement('div');
+        mermaidDiv.className = 'mermaid';
+        mermaidDiv.textContent = mermaidCode;
+
+        // Replace the parent <pre> block with our new mermaid div
+        const pre = codeBlock.parentNode;
+        pre.parentNode.replaceChild(mermaidDiv, pre);
+    });
+
+    // Now initialize Mermaid
+    mermaid.initialize({ startOnLoad: true });
+});
+</script>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/columns.css">
 
     {% include mathjax_support.html %}
+    {% include mermaid_support.html %}
   </head>
   <body>
     <div class="container-lg px-3 my-5 markdown-body">
