Merge pull request #347 from sylhare/mermaid

Add mermaid theme color

README.md

@@ -251,7 +251,7 @@ Enable the [mermaid-js](https://github.com/mermaid-js/mermaid) diagram rendering
 This will load and init the [mermaid.min.js](https://mermaid-js.github.io/mermaid/getting-started/n00b-gettingStarted.html#4-calling-mermaid-from-a-relative-link).
 
 ```yml
-mermaid: true # to Enable it
+mermaid: default # Enable mermaid-js for diagrams, use theme: base, forest, dark, default, neutral
 ```
 
 Find all the help you need on the official [mermaid documentation](https://mermaid-js.github.io/mermaid/).

_config.yml

@@ -24,7 +24,7 @@ color_image: /assets/img/lineart.png                    # A bit transparent for
 # More in the _data folder for share buttons, author and language
 # For layout customization, go to the "_sass > base" folder, and check "_variables.scss"
 katex: true                                             # Enable if using math markup
-mermaid: true                                           # Enable mermaid-js for sequence and diagrams
+mermaid: default                                        # Enable mermaid-js for diagrams, use theme: base, forest, dark, default, neutral
 google_analytics:                                       # Tracking ID, e.g. "UA-000000-01"
 cookie_consent: false                                   # To respect the usage of cookies
 color_theme: auto                                       # auto, dark or light

_includes/default/head.liquid

@@ -43,7 +43,10 @@
 
     <!-- Mermaid 9.1.1 -->
     {% if site.mermaid %}
-    <script defer src="{{ '/assets/js/vendor/mermaid.min.js' | relative_url }}" onload="mermaid.initialize({startOnLoad:true});"></script>
+    <script defer src="{{ '/assets/js/vendor/mermaid.min.js' | relative_url }}" onload="mermaid.initialize({
+      startOnLoad:true,
+      theme: '{{ site.mermaid }}',
+    });"></script>
     {% endif %}
 
     <!-- Simple Jekyll Search 1.10.0 -->

_posts/2018-11-02-Tech-stuff-example.md → _posts/2019-11-02-Tech-stuff-example.md

@@ -7,9 +7,8 @@ thumbnail: "assets/img/thumbnails/feature-img/circuit.jpeg"
 tags: [Mermaid, Highlight, Markdown]
 ---
 
-
+Let's demo some code snippet, with some mermaid diagrams.
 Because if you put some code in your blog, you would at least make it:
-
 1. Searchable
 2. Good-looking
 
@@ -79,7 +78,7 @@ function helloWorld(param1, param2) {
         return null;
     }
 
-    // @TODO comment
+    // TODO comment
 }
 ```
 

_posts/2021-04-27-dark-mode.md

@@ -1,12 +1,12 @@
 ---
 layout: post
 title: Dark Mode
-tags: [Katex, Markdown]
+tags: [Katex, Mermaid, Markdown]
 ---
 
-**More colors with less light.**
+More colors with less light. Click the **half-moon** most top-right button to turn the lights ON/OFF.
+Here is a bit of everything, so you can check how the theme look, have fun! 👌
 
-Click the half-moon most top-right button to turn the lights on/off. 
 
 # Headers
 ## Level 2
@@ -79,3 +79,19 @@ C @= D
 $$
 
 $$\utilde{AB}$$
+
+## Mermaid
+
+<div class="mermaid">
+flowchart TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+</div>