feat: add mermaid code fences usage

assets/js/clipboard.js

@@ -5,7 +5,11 @@ var pre = document.getElementsByTagName('pre');
 for (var i = 0; i < pre.length; ++ i)
 {
   var element = pre[i];
-  element.insertAdjacentHTML('afterbegin', '<button class="btn btn-copy"></button>');
+  var mermaid = element.getElementsByClassName('language-mermaid')[0];
+
+  if (mermaid == null) {
+    element.insertAdjacentHTML('afterbegin', '<button class="btn btn-copy"></button>');
+  }
 }
 
 var clipboard = new Clipboard('.btn-copy', {

assets/js/mermaid.js

@@ -7,4 +7,5 @@ var config = {
 
 document.addEventListener('DOMContentLoaded', () => {
   mermaid.initialize(config);
+  mermaid.init(undefined, '.language-mermaid');
 });

assets/scss/app.scss

@@ -22,9 +22,9 @@
 @import "components/code";
 @import "components/syntax";
 @import "components/comments";
-@import "components/diagrams";
 @import "components/forms";
 @import "components/images";
+@import "components/mermaid";
 @import "components/search";
 @import "components/tables";
 @import "layouts/footer";

assets/scss/common/_dark.scss

@@ -232,11 +232,6 @@ body.dark pre code::-webkit-scrollbar-thumb {
   background: $gray-400;
 }
 
-body.dark code:not(.hljs) {
-  background: $body-overlay-dark;
-  color: $body-color-dark;
-}
-
 body.dark pre code:hover {
   scrollbar-width: thin;
   scrollbar-color: $border-dark transparent;
@@ -246,6 +241,11 @@ body.dark pre code::-webkit-scrollbar-thumb:hover {
   background: $gray-500;
 }
 
+body.dark code:not(.hljs):not(.language-mermaid) {
+  background: $body-overlay-dark;
+  color: $body-color-dark;
+}
+
 body.dark blockquote {
   border-left: 3px solid $border-dark;
 }

assets/scss/components/_code.scss

@@ -60,3 +60,7 @@ pre code:hover {
 pre code::-webkit-scrollbar-thumb:hover {
   background: $gray-500;
 }
+
+code.language-mermaid {
+  background: none;
+}