Skip to content

Commit ecea6a5

Browse files
committed
fix: update Mermaid JavaScript to properly replace code blocks
- Fixed DOM manipulation to correctly replace code block elements - Changed from using replaceWith to parentNode.replaceChild - This ensures proper replacement of Jekyll-rendered code blocks - Follows recommended implementation for GitHub Pages with Jekyll
1 parent 13a666f commit ecea6a5

File tree

1 file changed

+11
-7
lines changed

1 file changed

+11
-7
lines changed

dox-theme/_layouts/default.html

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -75,18 +75,22 @@ <h1 class="c-page-header__title">{{ page.title }}</h1>
7575
<!-- Mermaid -->
7676
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
7777
<script>
78-
// Convert code blocks marked as mermaid into divs with the "mermaid" class
78+
// Wait until the DOM is fully loaded
7979
document.addEventListener("DOMContentLoaded", function() {
80-
document.querySelectorAll("pre code.language-mermaid").forEach(function(codeBlock) {
81-
// Create a new div with class 'mermaid'
80+
// Find all code blocks that have been marked as mermaid (Jekyll renders these with "language-mermaid")
81+
var mermaidBlocks = document.querySelectorAll("pre code.language-mermaid");
82+
83+
mermaidBlocks.forEach(function(codeBlock) {
84+
// Create a new div with class "mermaid"
8285
var mermaidDiv = document.createElement("div");
8386
mermaidDiv.className = "mermaid";
84-
// Use the code block's inner text as the Mermaid definition
87+
// Set its content to the text inside the code block
8588
mermaidDiv.innerHTML = codeBlock.innerText;
86-
// Replace the entire <pre> element with our new div
87-
codeBlock.parentNode.replaceWith(mermaidDiv);
89+
// Replace the entire <pre> element (the parent of the <code>) with our new div
90+
codeBlock.parentNode.parentNode.replaceChild(mermaidDiv, codeBlock.parentNode);
8891
});
89-
// Initialize Mermaid after transforming code blocks
92+
93+
// Initialize Mermaid; this scans the document for elements with class "mermaid" and renders them
9094
mermaid.initialize({ startOnLoad: true });
9195
});
9296
</script>

0 commit comments

Comments
 (0)