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

content/docs/prologue/quick-start.md

@@ -15,6 +15,8 @@ toc: true
 
 ## Flow
 
+### Shortcode
+
 ```md
 {{</* mermaid class="bg-light text-center" */>}}
 graph TD
@@ -33,6 +35,26 @@ graph TD
   C -->|Two| E[Result 2]
 {{< /mermaid >}}
 
+### Code fences
+
+````md
+```mermaid
+graph TD
+  A[Hard] -->|Text| B(Round)
+  B --> C{Decision}
+  C -->|One| D[Result 1]
+  C -->|Two| E[Result 2]
+```
+````
+
+```mermaid
+graph TD
+  A[Hard] -->|Text| B(Round)
+  B --> C{Decision}
+  C -->|One| D[Result 1]
+  C -->|Two| E[Result 2]
+```
+
 ## Sequence
 
 {{< mermaid >}}
@@ -51,13 +73,15 @@ sequenceDiagram
 
 {{< mermaid >}}
 gantt
-  section Section
+dateFormat  YYYY-MM-DD
-  Completed :done,    des1, 2014-01-06,2014-01-08
+title Adding GANTT diagram to mermaid
-  Active        :active,  des2, 2014-01-07, 3d
+excludes weekdays 2014-01-10
-  Parallel 1   :         des3, after des1, 1d
+
-  Parallel 2   :         des4, after des1, 1d
+section A section
-  Parallel 3   :         des5, after des3, 1d
+Completed task            :done,    des1, 2014-01-06,2014-01-08
-  Parallel 4   :         des6, after des4, 1d
+Active task               :active,  des2, 2014-01-09, 3d
+Future task               :         des3, after des2, 5d
+Future task2               :         des4, after des3, 5d
 {{< /mermaid >}}
 
 ## Class

layouts/shortcodes/mermaid.html

@@ -3,6 +3,6 @@
     {{ $data := replaceRE "(^\\s+```)" "" .Inner -}}
     {{ replaceRE "(```\\s+$)" "" $data -}}
   </div>
-{{ else }}
+{{ else -}}
-  {{ errorf "Set `mermaid = true` in `./config/_default/params.toml`"}}
+  {{ errorf "Set `mermaid = true` in `./config/_default/params.toml`" }}
-{{ end }}
+{{ end -}}