From 9ef3a635522aad42b6eaeb1dc75c6b1ed9975a11 Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Mon, 29 Mar 2021 10:57:01 +0800
Subject: [PATCH] Fix mermaid preformatted issue

* See: https://github.com/theme-next/hexo-theme-next/pull/1539

* See: https://github.com/next-theme/hexo-theme-next/commit/376d71878ff372226f10a40e87266a7a8283ac7c

* See: https://github.com/next-theme/hexo-theme-next/issues/211
---
 layout/_third-party/tags/mermaid.njk | 10 +++++++++-
 scripts/tags/mermaid.js              |  4 ++--
 test/tags/mermaid.js                 |  4 ++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/layout/_third-party/tags/mermaid.njk b/layout/_third-party/tags/mermaid.njk
index 519db56..ce69372 100644
--- a/layout/_third-party/tags/mermaid.njk
+++ b/layout/_third-party/tags/mermaid.njk
@@ -1,7 +1,15 @@
 {%- if theme.mermaid.enable %}
 <script{{ pjax }}>
-if (document.querySelectorAll('.mermaid').length) {
+var mermaidElements = document.querySelectorAll('.mermaid');
+if (mermaidElements.length) {
   NexT.utils.getScript('{{ theme.vendors.mermaid }}', () => {
+    mermaidElements.forEach(element => {
+      const newElement = document.createElement('div');
+      newElement.innerHTML = element.innerHTML;
+      newElement.className = element.className;
+      element.parentNode.replaceChild(newElement, element);
+    });
+
     mermaid.init({
       theme    : '{{ theme.mermaid.theme }}',
       logLevel : 3,
diff --git a/scripts/tags/mermaid.js b/scripts/tags/mermaid.js
index ab3546a..d927216 100644
--- a/scripts/tags/mermaid.js
+++ b/scripts/tags/mermaid.js
@@ -7,8 +7,8 @@
 const { escapeHTML } = require('hexo-util');
 
 module.exports = function(args, content) {
-  return `<div class="mermaid">
+  return `<pre class="mermaid">
 ${args.join(' ')}
 ${escapeHTML(content)}
-</div>`;
+</pre>`;
 };
diff --git a/test/tags/mermaid.js b/test/tags/mermaid.js
index 7706249..fc14e50 100644
--- a/test/tags/mermaid.js
+++ b/test/tags/mermaid.js
@@ -13,9 +13,9 @@ describe('mermaid', () => {
   const mermaid = require('../../scripts/tags/mermaid');
 
   it('default', () => {
-    mermaid(['graph', 'TD'], result).should.eql(`<div class="mermaid">
+    mermaid(['graph', 'TD'], result).should.eql(`<pre class="mermaid">
 graph TD
 ${escapeHTML(result)}
-</div>`);
+</pre>`);
   });
 });