diff options
author | Bjørn Erik Pedersen <bjorn.erik.pedersen@gmail.com> | 2022-02-17 13:04:00 +0100 |
---|---|---|
committer | Bjørn Erik Pedersen <bjorn.erik.pedersen@gmail.com> | 2022-02-24 18:59:50 +0100 |
commit | 08fdca9d9365eaf1e496a12e2af5e18617bd0e66 (patch) | |
tree | 6c6942d1b74a4160d93a997860bafd52b92025f5 /docs/layouts | |
parent | 2c20f5bc00b604e72b3b7e401fbdbf9447fe3470 (diff) |
Add Markdown diagrams and render hooks for code blocks
You can now create custom hook templates for code blocks, either one for all (`render-codeblock.html`) or for a given code language (e.g. `render-codeblock-go.html`).
We also used this new hook to add support for diagrams in Hugo:
* Goat (Go ASCII Tool) is built-in and enabled by default; just create a fenced code block with the language `goat` and start draw your Ascii diagrams.
* Another popular alternative for diagrams in Markdown, Mermaid (supported by GitHub), can also be implemented with a simple template. See the Hugo documentation for more information.
Updates #7765
Closes #9538
Fixes #9553
Fixes #8520
Fixes #6702
Fixes #9558
Diffstat (limited to 'docs/layouts')
-rw-r--r-- | docs/layouts/_default/_markup/render-codeblock-goat.html | 18 | ||||
-rw-r--r-- | docs/layouts/_default/_markup/render-codeblock-mermaid.html | 4 |
2 files changed, 22 insertions, 0 deletions
diff --git a/docs/layouts/_default/_markup/render-codeblock-goat.html b/docs/layouts/_default/_markup/render-codeblock-goat.html new file mode 100644 index 000000000..b1e57e94a --- /dev/null +++ b/docs/layouts/_default/_markup/render-codeblock-goat.html @@ -0,0 +1,18 @@ +{{ $width := .Attributes.width }} +{{ $height := .Attributes.height }} +{{ $class := .Attributes.class | default "" }} +<div class="goat svg-container {{ $class }}"> + {{ with diagrams.Goat .Code }} + <svg + xmlns="http://www.w3.org/2000/svg" + font-family="Menlo,Lucida Console,monospace" + {{ if or $width $height }} + {{ with $width }}width="{{ . }}"{{ end }} + {{ with $height }}height="{{ . }}"{{ end }} + {{ else }} + viewBox="0 0 {{ .Width }} {{ .Height }}" + {{ end }}> + {{ .Body }} + </svg> + {{ end }} +</div> diff --git a/docs/layouts/_default/_markup/render-codeblock-mermaid.html b/docs/layouts/_default/_markup/render-codeblock-mermaid.html new file mode 100644 index 000000000..15e4fdfbb --- /dev/null +++ b/docs/layouts/_default/_markup/render-codeblock-mermaid.html @@ -0,0 +1,4 @@ +<div class="mermaid"> + {{- .Code | safeHTML }} +</div> +{{ .Page.Store.Set "hasMermaid" true }} |