Merge pull request #427 from sylhare/mermaid.10.8

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='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/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"