diff --git a/assets/css/main.css b/assets/css/main.css
index cd76a71..88cc182 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -167,8 +167,8 @@ th, td {
pre {
max-width: 100%;
overflow: auto;
- margin-top: 0;
- margin-bottom: 0;
+ /* margin-top: 0; */
+ /* margin-bottom: 0; */
}
code,
diff --git a/exampleSiteMultilingual/content/posts/advanced.md b/exampleSiteMultilingual/content/posts/advanced.md
new file mode 100644
index 0000000..1c8f723
--- /dev/null
+++ b/exampleSiteMultilingual/content/posts/advanced.md
@@ -0,0 +1,105 @@
++++
+author = "Hugo Authors"
+title = "Advanced Diagram Usage"
+date = "2024-04-09"
+description = "Guide to advanced usage of Anubis2"
+tags = [
+ "emoji",
+]
++++
+
+
+## GoAT
+
+```goat
+ . . . .--- 1 .-- 1 / 1
+ / \ | | .---+ .-+ +
+ / \ .---+---. .--+--. | '--- 2 | '-- 2 / \ 2
+ + + | | | | ---+ ---+ +
+ / \ / \ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \ / 3
+ / \ / \ | | | | | | | | '---+ '-+ +
+ 1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \ 4
+```
+
+## Mermaid Diagrams
+
+Get more examples at [here](https://mermaid.js.org/intro/)
+
+```mermaid
+gitGraph:
+ commit "Ashish"
+ branch newbranch
+ checkout newbranch
+ commit id:"1111"
+ commit tag:"test"
+ checkout main
+ commit type: HIGHLIGHT
+ commit
+ merge newbranch
+ commit
+ branch b2
+ commit
+```
+
+```mermaid
+gantt
+ title A Gantt Diagram
+ dateFormat YYYY-MM-DD
+ section Section
+ A task :a1, 2014-01-01, 30d
+ Another task :after a1, 20d
+ section Another
+ Task in Another :2014-01-12, 12d
+ another task :24d
+
+```
+
+```mermaid
+stateDiagram
+ [*] --> Still
+ Still --> [*]
+
+ Still --> Moving
+ Moving --> Still
+ Moving --> Crash
+ Crash --> [*]
+
+```
+
+```mermaid
+sankey-beta
+
+Pumped heat,"Heating and cooling, ""homes""",193.026
+Pumped heat,"Heating and cooling, ""commercial""",70.672
+```
+
+```mermaid
+sequenceDiagram
+ loop Daily query
+ Alice->>Bob: Hello Bob, how are you?
+ alt is sick
+ Bob->>Alice: Not so good :(
+ else is well
+ Bob->>Alice: Feeling fresh like a daisy
+ end
+
+ opt Extra response
+ Bob->>Alice: Thanks for asking
+ end
+ end
+
+```
+
+```mermaid
+sequenceDiagram
+ participant Alice
+ participant Bob
+ Alice->>John: Hello John, how are you?
+ loop Healthcheck
+ John->>John: Fight against hypochondria
+ end
+ Note right of John: Rational thoughts
prevail!
+ John-->>Alice: Great!
+ John->>Bob: How about you?
+ Bob-->>John: Jolly good!
+```
diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html
new file mode 100644
index 0000000..753a2d8
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock-mermaid.html
@@ -0,0 +1,4 @@
+
+ {{- .Inner | safeHTML }} ++{{ .Page.Store.Set "hasMermaid" true }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 38f3b57..ddda08d 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -41,4 +41,15 @@ {{ if not .Params.disableComments }} {{ partial "comments.html" . }} {{ end }} + + {{/* When you use ```mermaid``, render-codeblock-mermaid.html is called and + `.Store.Set "hasMermaid"` is executed. + `.Store.Get "hasMermaid"` will return true and mermaid.js will be loaded. + */}} + {{ if .Store.Get "hasMermaid" }} + + {{ end }} {{ end }}