Mermaid support question

support
,
1

Trying to apply the guidance from here Diagrams | Hugo to the PaperMod theme. I’ve added the layouts/_default/_markup/render-codeblock-mermaid.html file to the theme’s directory, but then the section that says “And then include this snippet at the bottom of the content template”, I don’t follow. Where would this be in the PaperMod theme? I’ve grepped for mentions of “.Content” and there a lot of files to chose from:

$ grep -r ".Content" .
./layouts/partials/footer.html:                navigator.clipboard.writeText(codeblock.textContent);
./layouts/partials/footer.html:            range.selectNodeContents(codeblock);
./layouts/partials/home_info.html:        {{ .Content | markdownify }}
./layouts/partials/templates/schema_json.html:  "articleBody": {{ .Content | safeJS | htmlUnescape | plainify }},
./layouts/partials/toc.html:{{- $headers := findRE "<h[1-6].*?>(.|\n])+?</h[1-6]>" .Content -}}
./layouts/partials/toc.html:            <span class="details">{{- i18n "toc" | default "Table of Contents" }}</span>
./layouts/partials/toc.html:            {{- .TableOfContents -}}
./layouts/partials/anchored_headings.html:{{- /* formats .Content headings by adding an anchor */ -}}
./layouts/_default/rss.xml:      <content:encoded>{{ (printf "<![CDATA[%s]]>" .Content) | safeHTML }}</content:encoded>
./layouts/_default/list.html:{{- if .Content }}
./layouts/_default/list.html:  {{- partial "anchored_headings.html" .Content -}}
./layouts/_default/list.html:  {{- else }}{{ .Content }}{{ end }}
./layouts/_default/single.html:  {{- if .Content }}
./layouts/_default/single.html:    {{- partial "anchored_headings.html" .Content -}}
./layouts/_default/single.html:    {{- else }}{{ .Content }}{{ end }}
2

That is the file you should place the code at.

3

The author of the PaperMod theme made provisions for things like this…

mkdir layouts/partials/
cp themes/hugo-PaperMod/layouts/partials/extend_footer.html layouts/partials/

layouts/partials/extend_footer.html

{{ if .Page.Store.Get "hasMermaid" }}
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
  </script>
{{ end }}