diff options
| author | Bjørn Erik Pedersen <bjorn.erik.pedersen@gmail.com> | 2022-02-17 15:04:00 +0300 |
|---|---|---|
| committer | Bjørn Erik Pedersen <bjorn.erik.pedersen@gmail.com> | 2022-02-24 20:59:50 +0300 |
| commit | 2df37e9e80cbbf23076c9fe356211bed7c974e8f (patch) | |
| tree | 895068cc8f53ad6b5c1eec2de1852d7efe90681c /layouts | |
| parent | bd8037d432f49172249eb56c8ab01220dd0f58db (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 'layouts')
| -rw-r--r-- | layouts/_default/_markup/render-codeblock-goat.html | 18 | ||||
| -rw-r--r-- | layouts/_default/_markup/render-codeblock-mermaid.html | 4 |
2 files changed, 22 insertions, 0 deletions
diff --git a/layouts/_default/_markup/render-codeblock-goat.html b/layouts/_default/_markup/render-codeblock-goat.html new file mode 100644 index 000000000..b1e57e94a --- /dev/null +++ b/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/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html new file mode 100644 index 000000000..15e4fdfbb --- /dev/null +++ b/layouts/_default/_markup/render-codeblock-mermaid.html @@ -0,0 +1,4 @@ +<div class="mermaid"> + {{- .Code | safeHTML }} +</div> +{{ .Page.Store.Set "hasMermaid" true }} |