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
This commit is contained in:
Bjørn Erik Pedersen
2022-02-17 13:04:00 +01:00
parent 2c20f5bc00
commit 08fdca9d93
73 changed files with 1887 additions and 1986 deletions

View File

@@ -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>

View File

@@ -0,0 +1,4 @@
<div class="mermaid">
{{- .Code | safeHTML }}
</div>
{{ .Page.Store.Set "hasMermaid" true }}