Shortcode Mermaid
Cet article fait partie de la série: Hugo
Table des matières
On va integrer mermaid dans Hugo.
Mermaid permet de générer des jolies diagrammes à partir de texte.
Kroki est une alternative.
Le code
On va creer dans notre dossier des shortcodes /themes/VOTRETHEME/layouts/shortcodes un fichier mermaid.html
<div class="mermaid">
{{ .Inner | safeHTML }}
</div>
{{ if le (.Page.Scratch.Get "mermaidInserted") 0 }}
{{ .Page.Scratch.Add "mermaidInserted" 1 }}
{{ $mermaid := resources.Get "js/mermaid.min.js" | minify | fingerprint }}
<script type="application/javascript" src="{{ $mermaid.Permalink }}" defer></script>
<script type="module">
mermaid.initialize({});
</script>
{{ end }}mermaid.min.js
On recupere le fichier mermaid.min.js pour le placer dans le dossier /themes/VOTRETHEME/assets/js
$ wget https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.jsLe Shortcode
{{< mermaid >}}
sequenceDiagram
Louise->>Robert: Salut
Robert-->>Louis: Bien!
Louis-)Robert: A plus tard!
{{< / mermaid >}}Tests
vous pouvez tester vos code ici
Exemples
sequenceDiagram
Louise->>Robert: Salut
Robert-->>Louis: Bien!
Louis-)Robert: A plus tard!
pie title Hugo c'est cool?
"Oui" : 25
"Oui en jaune" : 75
Liens
https://satoru.dev/2020/08/using-mermaid-in-hugo/
