hugo/docs/layouts/_default/_markup/render-codeblock-goat.html

{{ $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>
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 2022-02-17 07:04:00 -05:00			`{{ $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>`