diff options
Diffstat (limited to 'docs/content/en/content-management/diagrams.md')
-rw-r--r-- | docs/content/en/content-management/diagrams.md | 24 |
1 files changed, 14 insertions, 10 deletions
diff --git a/docs/content/en/content-management/diagrams.md b/docs/content/en/content-management/diagrams.md index 17407098f..8851034c6 100644 --- a/docs/content/en/content-management/diagrams.md +++ b/docs/content/en/content-management/diagrams.md @@ -1,20 +1,22 @@ --- title: Diagrams -description: Use fenced code blocks and markdown render hooks to display diagrams. +description: Use fenced code blocks and Markdown render hooks to include diagrams in your content. categories: [content management] keywords: [diagrams,drawing] menu: docs: parent: content-management - weight: 50 -weight: 50 + weight: 260 +weight: 260 toc: true --- -{{< new-in 0.93.0 >}} ## GoAT diagrams (ASCII) -Hugo supports [GoAT](https://github.com/bep/goat) natively. This means that this code block: +Hugo natively supports [GoAT] diagrams with an [embedded code block render hook]. This means that this code block: + +[GoAT]: https://github.com/bep/goat +[embedded code block render hook]: {{% eturl render-codeblock-goat %}} ````txt ```goat @@ -44,19 +46,21 @@ Will be rendered as: ## Mermaid diagrams -Hugo currently does not provide default templates for Mermaid diagrams. But you can easily add your own. One way to do it would be to create `layouts/_default/_markup/render-codeblock-mermaid.html`: +Hugo does not provide a built-in template for Mermaid diagrams. Create your own using a [code block render hook]: -```go-html-template +[code block render hook]: /render-hooks/code-blocks/ + +{{< code file=layouts/_default/_markup/render-codeblock-mermaid.html >}} <pre class="mermaid"> {{- .Inner | safeHTML }} </pre> {{ .Page.Store.Set "hasMermaid" true }} -``` +{{< /code >}} -And then include this snippet at the bottom of the content template (**Note**: below `.Content` as the render hook is not processed until `.Content` is executed): +And then include this snippet at the bottom of the content template: ```go-html-template -{{ if .Page.Store.Get "hasMermaid" }} +{{ if .Store.Get "hasMermaid" }} <script type="module"> import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true }); |