Mermaid Update

README.md

@@ -260,15 +260,13 @@ mermaid: default # Enable mermaid-js for diagrams, use theme: base, forest, dark
 ```
 
 Find all the help you need on the official [mermaid documentation](https://mermaid-js.github.io/mermaid/).
-You can create with ease diagrams. Add your mermaid script inside two mermaid divs (default Kramdown does not yet support mermaid).
-With the `class="mermaid"` inside the `<div>`:
+Use `mermaid` as color highlighter language to render the diagram or with the `class="mermaid"` inside the `<div>`:
 
-```html
-<div class="mermaid">
+```markdown
+```mermaid
 sequenceDiagram
     Alice->>John: Hello John, how are you?
     John-->>Alice: Great!
-</div>
 ```
 
 ### Social icons

_includes/default/footer.liquid

@@ -1,12 +1,18 @@
 <footer class="site-footer">
     <p class="text">
         {{ site.footer_text | default: "Powered by <a href='https://jekyllrb.com/'>Jekyll</a> with <a href='https://github.com/sylhare/Type-on-Strap'>Type on Strap</a>" }}</p>
-            <div class="footer-icons">
-                <ul>
-                <!-- Social icons from Font Awesome, if enabled -->
-                {% include social/icons.liquid %}
-                </ul>
-            </div>
+    <div class="footer-icons">
+        <ul>
+            <!-- Social icons from Font Awesome, if enabled -->
+            {% include social/icons.liquid %}
+        </ul>
+    </div>
+    {% if site.mermaid %}
+        <script type="module">
+          mermaid.initialize({ startOnLoad: false, theme: "default" });
+          mermaid.run({ nodes: [...document.querySelectorAll('.language-mermaid'), ...document.querySelectorAll('.mermaid')] });
+        </script>
+    {% endif %}
 </footer>
 
 

_includes/default/head.liquid

@@ -41,12 +41,9 @@
     <script defer src="{{ '/assets/js/vendor/katex.auto-render.min.js' | relative_url }}" onload="renderMathInElement(document.body);"></script>
     {% endif %}
 
-    <!-- Mermaid 10.6.1 -->
+    <!-- Mermaid 10.8.0 -->
     {% if site.mermaid %}
-    <script defer src="{{ '/assets/js/vendor/mermaid.min.js' | relative_url }}" onload="mermaid.initialize({
-      startOnLoad:true,
-      theme: '{{ site.mermaid }}',
-    });"></script>
+    <script defer src="{{ '/assets/js/vendor/mermaid.min.js' | relative_url }}"></script>
     {% endif %}
 
     <!-- Simple Jekyll Search 1.10.0 -->

_posts/2016-12-03-Mermaid.md

@@ -18,9 +18,17 @@ sequenceDiagram
 </div>
 ```
 
+> 💡 Now render also work with the GitHub markdown highlight.
+{% highlight markdown %}
+```mermaid
+sequenceDiagram
+    Alice->>John: Hello John, how are you?
+    John-->>Alice: Great!
+```
+{% endhighlight %}
 That will be rendered into this:
 
-{% include aligner.html images="mermaid-example.png" column=1 %}
+{% include aligner.html images="mermaid-example.png" column=auto %}
 
 You can also go with more complex features and diagrams from the [documentation](https://mermaid-js.github.io/mermaid/),
 and try it out with the [live editor](https://mermaid.live/).
@@ -43,18 +51,20 @@ sequenceDiagram
 
 ### Flow
 
-<div class="mermaid">
+```mermaid
 flowchart TD
     A[Christmas] -->|Get money| B(Go shopping)
     B --> C{Let me think}
     C -->|One| D[Laptop]
+    D ~~~ E
     C -->|Two| E[iPhone]
     C -->|Three| F[fa:fa-car Car]
-</div>
+    %% Grinch
+```
 
 ### Class
 
-<div class="mermaid">
+```mermaid
 classDiagram
     Animal <|-- Duck
     Animal <|-- Fish
@@ -76,23 +86,23 @@ classDiagram
       +bool is_wild
       +run()
     }
-</div>
+```
 
 ### State
 
-<div class="mermaid">
+```mermaid
 stateDiagram-v2
     [*] --> Still
     Still --> [*]
     Still --> Moving
     Moving --> Still
     Moving --> Crash
     Crash --> [*]
-</div>
+```
 
 ### ER
 
-<div class="mermaid">
+```mermaid
 erDiagram
     CUSTOMER }|..|{ DELIVERY-ADDRESS : has
     CUSTOMER ||--o{ ORDER : places
@@ -102,11 +112,11 @@ erDiagram
     ORDER ||--|{ ORDER-ITEM : includes
     PRODUCT-CATEGORY ||--|{ PRODUCT : contains
     PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-</div>
+```
 
 ### Gantt
 
-<div class="mermaid">
+```mermaid
 gantt
     title A Gantt Diagram
     dateFormat  YYYY-MM-DD
@@ -116,11 +126,11 @@ gantt
     section Another
     Task in sec      :2014-01-12  , 12d
     another task      : 24d
-</div>
+```
 
 ### User Journey
 
-<div class="mermaid">
+```mermaid
 journey
     title My working day
     section Go to work
@@ -130,11 +140,11 @@ journey
     section Go home
       Go downstairs: 5: Me
       Sit down: 3: Me
-</div>
+```
 
 ### Git
 
-<div class="mermaid">
+```mermaid
 gitGraph
     commit
     commit
@@ -146,20 +156,20 @@ gitGraph
     merge develop
     commit
     commit
-</div>
+```
 
 ### Pie
 
-<div class="mermaid">
+```mermaid
 pie title Pets adopted by volunteers
     "Dogs" : 386
     "Cats" : 85
     "Rats" : 15
-</div>
+```
 
 ### Mindmap
 
-<div class="mermaid">
+```mermaid
 mindmap
   root((mindmap))
     Origins
@@ -177,11 +187,11 @@ mindmap
     Tools
       Pen and paper
       Mermaid
-</div>
+```
 
 ### QuadrantChart
 
-<div class="mermaid">
+```mermaid
 quadrantChart
     title Reach and engagement of campaigns
     x-axis Low Reach --> High Reach
@@ -196,16 +206,16 @@ quadrantChart
     Campaign D: [0.78, 0.34]
     Campaign E: [0.40, 0.34]
     Campaign F: [0.35, 0.78]
-</div>
+```
 
 ### XYChart
 
-<div class="mermaid">
+```mermaid
     xychart-beta
     title "Sales Revenue"
     x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
     y-axis "Revenue (in $)" 4000 --> 11000
     bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
     line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-</div>
+```
 

_sass/base/_global.scss

@@ -269,7 +269,7 @@ details {
 }
 
 // Mermaid
-.mermaid {
+.mermaid, .language-mermaid {
   background-color: rgba(255, 255, 255, 0.9);
   border-radius: 2%;
 

type-on-strap.gemspec

@@ -23,7 +23,7 @@ Gem::Specification.new do |spec|
                                Thanks for using Type on strap v2+!
                                MSG
 
-  spec.required_ruby_version   = ">= 2.7.4", "< 4.0"
+  spec.required_ruby_version   = ">= 2.7.2", "< 4.0"
 
   spec.add_runtime_dependency "jekyll", ">= 3.8", "< 5.0"
   spec.add_runtime_dependency "jekyll-feed", ">= 0.15.1", "<= 0.17"