Fix mermaid background color

layout/_third-party/tags/mermaid.njk

@@ -1,6 +1,6 @@
 {%- if theme.mermaid.enable %}
 <script{{ pjax }}>
-if (document.querySelectorAll('pre.mermaid').length) {
+if (document.querySelectorAll('.mermaid').length) {
   NexT.utils.getScript('{{ theme.vendors.mermaid }}', () => {
     mermaid.init({
       theme    : '{{ theme.mermaid.theme }}',

scripts/tags/mermaid.js

@@ -7,8 +7,8 @@
 const { escapeHTML } = require('hexo-util');
 
 module.exports = function(args, content) {
-  return `<pre class="mermaid" style="text-align: center;">
+  return `<div class="mermaid">
 ${args.join(' ')}
 ${escapeHTML(content)}
-</pre>`;
+</div>`;
 };

source/css/_common/scaffolding/tags/mermaid.styl

@@ -0,0 +1,4 @@
+.mermaid {
+  margin-bottom: 20px;
+  text-align: center;
+}

source/css/_common/scaffolding/tags/tags.styl

@@ -7,3 +7,5 @@
 @import 'note' if (hexo-config('note.style') != 'disabled');
 
 @import 'pdf' if (hexo-config('pdf.enable'));
+
+@import 'mermaid' if (hexo-config('mermaid.enable'));

test/tags/mermaid.js

@@ -13,9 +13,9 @@ describe('mermaid', () => {
   const mermaid = require('../../scripts/tags/mermaid');
 
   it('default', () => {
-    mermaid(['graph', 'TD'], result).should.eql(`<pre class="mermaid" style="text-align: center;">
+    mermaid(['graph', 'TD'], result).should.eql(`<div class="mermaid">
 graph TD
 ${escapeHTML(result)}
-</pre>`);
+</div>`);
   });
 });