mirror of
https://github.com/gohugoio/hugo.git
synced 2025-08-24 21:56:05 +02:00
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:
18
docs/layouts/_default/_markup/render-codeblock-goat.html
Normal file
18
docs/layouts/_default/_markup/render-codeblock-goat.html
Normal 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>
|
@@ -0,0 +1,4 @@
|
||||
<div class="mermaid">
|
||||
{{- .Code | safeHTML }}
|
||||
</div>
|
||||
{{ .Page.Store.Set "hasMermaid" true }}
|
Reference in New Issue
Block a user