fix: encode markmap source as base64 to avoid being handled by other plugins

Author: gera2ld

mkdocs_markmap/extension.py

@@ -1,3 +1,4 @@
+import base64
 import logging
 import re
 from functools import partial
@@ -49,29 +50,31 @@ def run(self, lines: List[str]) -> List[str]:
                 included_paths.append(path)
                 try:
                     with open(path, "r", encoding=self.encoding) as r:
-                        markmap: List[str] = r.readlines()
-                        
+                        markmap = r.read()
+
                 except Exception as e:
                     log.error("unable to include file {}. Ignoring statement. Error: {}".format(path, e))
                     lines[loc] = INCLUDE_SYNTAX.sub("",line)
                     break
 
                 line_split: List[str] = INCLUDE_SYNTAX.split(line)
+                output: List[str] = []
                 if len(markmap) == 0:
-                    markmap.append("")
+                    output.append("")
                 else:
-                    markmap.insert(0, "```markmap")
-                    markmap.append("```")
-                
+                    output.append('<pre class="language-markmap"><code encoding="base64">')
+                    output.append(base64.b64encode(markmap.encode()).decode())
+                    output.append("</code></pre>")
+
                 if line_split[0].strip() != "":
-                    markmap.insert(0, line_split[0])
+                    output.insert(0, line_split[0])
 
                 if line_split[2].strip() != "":
-                    markmap.append(line_split[2])
+                    output.append(line_split[2])
 
-                lines = lines[:loc] + markmap + lines[loc+1:]
+                lines = lines[:loc] + output + lines[loc+1:]
                 break
-                
+
             else:
                 done = True
 

mkdocs_markmap/plugin.py

@@ -1,14 +1,15 @@
+import base64
 import logging
 from pathlib import Path
 import re
 from typing import Dict, Tuple
 
 from bs4 import BeautifulSoup, ResultSet, Tag
-
 from mkdocs.config.base import Config, load_config
 from mkdocs.config.config_options import Type as PluginType
 from mkdocs.plugins import BasePlugin
 from mkdocs.structure.pages import Page
+
 from mkdocs_markmap.extension import MarkmapExtension
 
 from .defaults import MARKMAP
@@ -116,7 +117,6 @@ def on_page_content(self, html: str, page: Page, **kwargs) -> str:
 
         for index, markmap in enumerate(markmaps):
             markmap: Tag
-            tag_id: str = f"markmap-{index}"
             pre: Tag
             code: Tag
             if markmap.name == "pre":
@@ -129,5 +129,9 @@ def on_page_content(self, html: str, page: Page, **kwargs) -> str:
             pre["class"] = pre.get("class", []) + ["mkdocs-markmap"]
             code.name = "markmap-data"
             code.attrs["hidden"] = "true"
+            if not code.attrs.get("encoding"):
+                # Encode content as base64 to avoid being handled by other plugins like KaTeX
+                code.attrs["encoding"] = "base64"
+                code.string = base64.b64encode(code.get_text().strip().encode()).decode()
 
         return str(soup)

mkdocs_markmap/static_files/mkdocs-markmap.js

@@ -9,24 +9,39 @@
     function parseData(content) {
         const { root, frontmatter } = transformer.transform(content);
         let options = markmap.deriveOptions(frontmatter?.markmap);
-        options = Object.assign({
-            fitRatio: 0.85,
-        }, options);
+        options = Object.assign(
+            {
+                fitRatio: 0.85,
+            },
+            options
+        );
         return { root, options };
     }
 
     function resetMarkmap(m, el) {
         const { minX, maxX, minY, maxY } = m.state;
-        const height = el.clientWidth * (maxX - minX) / (maxY - minY);
+        const height = (el.clientWidth * (maxX - minX)) / (maxY - minY);
         el.style.height = height + "px";
         m.fit();
     }
 
+    function decodeBase64(encoded) {
+        const binary = atob(encoded);
+        const bytes = new Uint8Array(binary.length);
+        for (let i = 0; i < bytes.length; i++) {
+            bytes[i] = binary.charCodeAt(i);
+        }
+        return new TextDecoder().decode(bytes);
+    }
+
     function renderMarkmap(el) {
-        let svg = el.querySelector('svg');
-        if (svg) return;
-        const content = el.textContent;
-        el.innerHTML = '<svg>';
+        const dataEl = el.querySelector("markmap-data");
+        if (!dataEl) return;
+        let content = el.textContent;
+        if (dataEl.getAttribute("encoding") === "base64") {
+            content = decodeBase64(content);
+        }
+        el.innerHTML = "<svg>";
         svg = el.firstChild;
         const { root, options } = parseData(content);
         const m = markmap.Markmap.create(svg, options, root);
@@ -39,15 +54,15 @@
     }
 
     function updateMarkmaps(node) {
-        for (const el of node.querySelectorAll('.mkdocs-markmap')) {
+        for (const el of node.querySelectorAll(".mkdocs-markmap")) {
             renderMarkmap(el);
         }
     }
 
     loading.then(() => {
         const observer = new MutationObserver((mutationList) => {
             for (const mutation of mutationList) {
-                if (mutation.type === 'childList') {
+                if (mutation.type === "childList") {
                     for (const node of mutation.addedNodes) {
                         updateMarkmaps(node);
                     }