feat(markdown_mermaid.js)!: generate <pre class="mermaid"></pre> inst…

…ead of <div class="mermaid"></div> Original html tag might break mermaid graph see oruelle#16
Lee-W · Jan 31, 2025 · 4c40824 · 4c40824
1 parent cb08e91
commit 4c40824
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 13 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -61,18 +61,18 @@ Expected output
 ```html
 <h1>Title</h1>
 <p>Some text.</p>
-<div class="mermaid">
+<pre class="mermaid">
 graph TB
     A --> B
     B --> C
-</div>
+</pre>
 
 <p>Some other text.</p>
-<div class="mermaid">
+<pre class="mermaid">
 graph TB
     D --> E
     E --> F
-</div>
+</pre>
 
 <script type="module">
     import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';

diff --git a/markdown_mermaidjs/markdown_mermaidjs.py b/markdown_mermaidjs/markdown_mermaidjs.py
@@ -61,7 +61,7 @@ def add_mermaid_script_and_tag(self, lines: list[str]) -> list[str]:
                 match_codeblock_end = codeblock_end_pattern.match(line)
                 if match_codeblock_end:
                     in_mermaid_codeblock = False
-                    result_lines.append("</div>")
+                    result_lines.append("</pre>")
                     continue
 
             match_mermaid_codeblock_start = self.MERMAID_CODEBLOCK_START.match(line)
@@ -70,7 +70,7 @@ def add_mermaid_script_and_tag(self, lines: list[str]) -> list[str]:
                 in_mermaid_codeblock = True
                 codeblock_sign = match_mermaid_codeblock_start.group("code_block_sign")
                 codeblock_end_pattern = re.compile(rf"{codeblock_sign}\s*")
-                result_lines.append('<div class="mermaid">')
+                result_lines.append('<pre class="mermaid">')
                 continue
 
             result_lines.append(line)

diff --git a/tests/test_markdown_mermaid/test_add_mermaid_script_and_tag_input_file_path0_.yml b/tests/test_markdown_mermaid/test_add_mermaid_script_and_tag_input_file_path0_.yml
@@ -1,5 +1,5 @@
-"# Title\n\n\n\nSome text.\n\n\n\n<div class=\"mermaid\">\ngraph TB\n\n    A --> B\n\
-  \n    B --> C\n\n</div>\n\n\nSome other text.\n\n\n\n<div class=\"mermaid\">\ngraph\
-  \ TB\n\n    D --> E\n\n    E --> F\n\n</div>\n\n\n\n\nEnd of the file\n\n\n<script\
+"# Title\n\n\n\nSome text.\n\n\n\n<pre class=\"mermaid\">\ngraph TB\n\n    A --> B\n\
+  \n    B --> C\n\n</pre>\n\n\nSome other text.\n\n\n\n<pre class=\"mermaid\">\ngraph\
+  \ TB\n\n    D --> E\n\n    E --> F\n\n</pre>\n\n\n\n\nEnd of the file\n\n\n<script\
   \ type=\"module\">\n    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';\n\
   \    mermaid.initialize({ startOnLoad: true });\n</script>\n"
diff --git a/tests/test_markdown_mermaid/test_add_mermaid_script_and_tag_with_icons_input_file_path0_.yml b/tests/test_markdown_mermaid/test_add_mermaid_script_and_tag_with_icons_input_file_path0_.yml
@@ -1,14 +1,14 @@
 "# Title\n\n\n\nTesting 'registerIconPacks' as used by https://mermaid.js.org/syntax/architecture.html.\n\
-  \n\n\n<div class=\"mermaid\">\narchitecture-beta\n\n    group api(logos:aws-lambda)[API]\n\
+  \n\n\n<pre class=\"mermaid\">\narchitecture-beta\n\n    group api(logos:aws-lambda)[API]\n\
   \n\n\n    service db(logos:aws-aurora)[Database] in api\n\n    service disk1(logos:aws-glacier)[Storage]\
   \ in api\n\n    service disk2(logos:aws-s3)[Storage] in api\n\n    service server(logos:aws-ec2)[Server]\
   \ in api\n\n\n\n    db:L -- R:server\n\n    disk1:T -- B:server\n\n    disk2:T --\
-  \ B:db\n\n</div>\n\n\nIt only supports full url lazy-loading: https://mermaid.js.org/config/icons.html\n\
-  \n\n\n<div class=\"mermaid\">\narchitecture-beta\n\n    group api(logos:aws-lambda)[API]\n\
+  \ B:db\n\n</pre>\n\n\nIt only supports full url lazy-loading: https://mermaid.js.org/config/icons.html\n\
+  \n\n\n<pre class=\"mermaid\">\narchitecture-beta\n\n    group api(logos:aws-lambda)[API]\n\
   \n\n\n    service db(logos:aws-aurora)[Database] in api\n\n    service disk1(logos:aws-glacier)[Storage]\
   \ in api\n\n    service disk2(logos:aws-s3)[Storage] in api\n\n    service server(logos:aws-ec2)[Server]\
   \ in api\n\n\n\n    db:L -- R:server\n\n    disk1:T -- B:server\n\n    disk2:T --\
-  \ B:db\n\n</div>\n\n\n\n\nEnd of the file\n\n\n<script type=\"module\">\n    import\
+  \ B:db\n\n</pre>\n\n\n\n\nEnd of the file\n\n\n<script type=\"module\">\n    import\
   \ mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';\n\
   mermaid.registerIconPacks([\n    { name: 'logos', loader: () => fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res)\
   \ => res.json()) }\n]);\n    mermaid.initialize({ startOnLoad: true });\n</script>\n"