docs: harden latex and mermaid rendering

docs/javascripts/mathjax.js

@@ -1,16 +1,73 @@
 window.MathJax = {
   tex: {
-    inlineMath: [["\\(", "\\)"]],
-    displayMath: [["\\[", "\\]"]],
-    processEscapes: true,
-    processEnvironments: true
+    inlineMath: [["\\(", "\\)"], ["$", "$"]],
+    displayMath: [["\\[", "\\]"], ["$$", "$$"]],
+    processEscapes: true
   },
   options: {
-    ignoreHtmlClass: ".*|",
     processHtmlClass: "arithmatex"
   }
 };
 
-document.subscribe(() => { 
-  MathJax.typesetPromise()
-})
+let isRendering = false;
+
+/**
+ * Main render function to handle both LaTeX and Mermaid diagrams.
+ * Designed for MkDocs Material's Single Page App (SPA) navigation.
+ */
+const renderAll = () => {
+  if (isRendering) return;
+  isRendering = true;
+
+  // 1. Mermaid: Surgical Unwrap and Render
+  if (typeof mermaid !== "undefined") {
+    const blocks = document.querySelectorAll('.mermaid code');
+    let needsMermaidRun = false;
+
+    blocks.forEach(code => {
+      const pre = code.parentElement;
+      // Only process if we haven't unwrapped this specific block yet
+      if (!pre.hasAttribute('data-processed')) {
+        pre.textContent = code.textContent;
+        pre.setAttribute('data-processed', 'true');
+        needsMermaidRun = true;
+      }
+    });
+
+    if (needsMermaidRun) {
+      mermaid.initialize({ startOnLoad: false, theme: 'default' });
+      mermaid.run({ 
+        nodes: document.querySelectorAll('.mermaid') 
+      });
+    }
+  }
+
+  // 2. MathJax: Render LaTeX notations like O(log N)
+  if (window.MathJax && window.MathJax.typesetPromise) {
+    window.MathJax.typesetPromise();
+  }
+
+  // Release the mutex after a short delay to allow DOM to settle
+  setTimeout(() => { 
+    isRendering = false; 
+  }, 100);
+};
+
+/**
+ * MutationObserver catches content changes during instant navigation
+ * without requiring the fragile document.subscribe hook.
+ */
+const observer = new MutationObserver((mutations) => {
+  if (!isRendering) {
+    renderAll();
+  }
+});
+
+// Start observing the body for new module content
+observer.observe(document.body, { 
+  childList: true, 
+  subtree: true 
+});
+
+// Initial load execution
+window.addEventListener('load', renderAll);

docs/modules/dynamic_interval_management/README.md

@@ -22,7 +22,7 @@ The theoretical lower bound for merging $N$ static intervals is $\Omega(N \log N
 The advantage of an Augmented AVL Interval Tree is its ability to prune search branches that cannot contain an overlap, ensuring $O(\log N)$ search time.
 
 ```mermaid
-{% include "modules/dynamic_interval_management/static/pruning-mermaid.txt" %}
+--8<-- "modules/dynamic_interval_management/static/pruning-mermaid.txt"
 ```
 
 ## 2. Design Approaches

docs/modules/dynamic_interval_management/static/pruning-mermaid.txt

@@ -1,5 +1,5 @@
 graph TD
-    Start([Search for Overlap with Query  [7, 9]]) --> Root
+    Start(["Search for Overlap with Query  [7, 9]"]) --> Root
 
     Root{"Node:  [5, 8]<br/>Subtree Max: 20"} -- "Overlap Check" --> Match
     Root -- "Check Left Subtree" --> LeftCheck{"Left Subtree Max >= 7?"}

mkdocs.yml

@@ -19,7 +19,7 @@ markdown_extensions:
           class: mermaid
           format: !!python/name:pymdownx.superfences.fence_code_format
   - pymdownx.arithmatex:
-      generic: true # For your O(log N) LaTeX notations
+      generic: true
   - pymdownx.snippets:
       base_path: docs
 
@@ -46,3 +46,4 @@ nav:
 extra_javascript:
   - javascripts/mathjax.js
   - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
+  - https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js

pyproject.toml

@@ -19,9 +19,9 @@ dev = [
 docs = [
     "mkdocs-macros-plugin>=1.5.0",
     "mkdocs-material>=9.7.6",
-    "mkdocs-mermaid2-plugin>=1.2.3",
     "mkdocstrings-python>=2.0.3",
     "mkdocstrings[python]>=1.0.4",
+    "pymdown-extensions>=10.21.2",
 ]
 lint = [
     "ruff>=0.15.12",