feat: add mermaid code fences usage

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;
+}