| <!-- should be in templates/ --> | |
| <html> | |
| <head> | |
| <style> | |
| div.mermaid { | |
| width:25%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>{{page.title}}</h1> | |
| {{page.content | safe }} | |
| <!-- when this javascript is loaded and initialized it will look for divs with the class mermaid. | |
| it will replace the content of those divs with the generated svg --> | |
| <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> | |
| <script>mermaid.initialize({startOnLoad:true});</script> | |
| </body> | |
| </html> |
+++ title = "Mermaid example" description = "an example of using mermaid in zola"
template = "mermaid.html" +++
Let's see can we include mermaid diagrams?
Let's use a shortcode for this.
{% mermaiddiagram() %} journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 5: Me {% end %}
| <!-- should be in templates/shortcodes/ --> | |
| <div class="mermaid"> | |
| {{ body }} | |
| </div> |
My question is, the mermaid content every single line must end with semicolon. And the {{ body }} can not be parser correctly natively by the javascript mermaid.