Mermaid and PaperMod theme: help to create a shortcode

[nicfab]

Hello!
I use the PaperMod theme, and I would like to use Mermaid syntax.
Is there anybody to help me (I am not a developer) create a shortcode file to use mermaid without changing html files under /layout/partial?
I really appreciate any help you can provide.

[alexandros]

Hello,

Since version 0.93.0 Hugo has native support for diagrams. See:

Diagrams

[nicfab]

Thank you @alexandros
I created the file named render-codeblock-mermaid.html as I read here: Diagrams | Hugo
I also added at the end of my article the following lines

{{ if .Page.Store.Get "hasMermaid" }}
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script>
    mermaid.initialize({ startOnLoad: true });
  </script>
{{ end }}

However, at the end of the page, once it is published, I see the diagram, but on the bottom, I also see the following lines

{{ if .Page.Store.Get "hasMermaid" }}

{{ end }}

If I delete those two lines, I see them all correctly.
Why?

[alexandros]

@nicfab

{{ if .Page.Store.Get "hasMermaid" }}
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script>
    mermaid.initialize({ startOnLoad: true });
  </script>
{{ end }}

You need to override the relevant page template (most likely single.html) of the Papermod theme and include the above snippet in it.

To override you need to include a /layouts/ directory under the root of your project and then place the template with the changes under the same directory path as it has in the Papermod theme.

This way you can keep the original theme intact so that you can update it if needed and add Mermaid diagrams support for your project.

[nicfab]

I edited the single.html, which was under themes/PaperMod/layouts/_default, adding the Mermaid code, and now the files have the following lines:

{{- define "main" }}

<article class="post-single">
  <header class="post-header">
    {{ partial "breadcrumbs.html" . }}
    <h1 class="post-title">
      {{ .Title }}
      {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
    </h1>
    {{- if .Description }}
    <div class="post-description">
      {{ .Description }}
    </div>
    {{- end }}
    {{- if not (.Param "hideMeta") }}
    <div class="post-meta">
      {{- partial "post_meta.html" . -}}
      {{- partial "translation_list.html" . -}}
      {{- partial "edit_post.html" . -}}
      {{- partial "post_canonical.html" . -}}
    </div>
    {{- end }}
  </header>
  {{- $isHidden := .Params.cover.hidden | default .Site.Params.cover.hiddenInSingle | default .Site.Params.cover.hidden }}
  {{- partial "cover.html" (dict "cxt" . "IsHome" false "isHidden" $isHidden) }}
  {{- if (.Param "ShowToc") }}
  {{- partial "toc.html" . }}
  {{- end }}

  {{- if .Content }}
  <div class="post-content">
    {{- if not (.Param "disableAnchoredHeadings") }}
    {{- partial "anchored_headings.html" .Content -}}
    {{- else }}{{ .Content }}{{ end }}
  </div>
  {{- end }}

  {{ if .Page.Store.Get "hasMermaid" }}
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script>
    mermaid.initialize({ startOnLoad: true });
  </script>
  {{ end }}
  
  <footer class="post-footer">
    {{- if .Params.tags }}
    <ul class="post-tags">
      {{- range ($.GetTerms "tags") }}
      <li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
      {{- end }}
    </ul>
    {{- end }}
    {{- if (.Param "ShowPostNavLinks") }}
    {{- partial "post_nav_links.html" . }}
    {{- end }}
    {{- if (and .Site.Params.ShowShareButtons (ne .Params.disableShare true)) }}
    {{- partial "share_icons.html" . -}}
    {{- end }}
  </footer>

  {{- if (.Param "comments") }}
  {{- partial "comments.html" . }}
  {{- end }}
</article>

{{- end }}{{/* end main */}}

I put the Mermaid code after {{- if .Content }}.
I have also attached a screenshot of the folders.

It doesn’t work.
Where am I wrong?

[alexandros]

You need to include the code block to enable Mermaid within the following condition:

{{- if .Content }}
...
{{- end }}

Right above the end tag.

[nicfab]

I did it, as follows

{{- if .Content }}
  <div class="post-content">
    {{- if not (.Param "disableAnchoredHeadings") }}
    {{- partial "anchored_headings.html" .Content -}}
    {{- else }}{{ .Content }}{{ end }}
  </div>
  {{ if .Page.Store.Get "hasMermaid" }}
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script>
    mermaid.initialize({ startOnLoad: true });
  </script>
  {{ end }}
  {{- end }}

But it doesn’t work.

[alexandros]

I am out of ideas, also I don’t have much time these days.

Try sharing a repo with sample content that reproduces the problem.
For others (or me -come tomorrow-) to have a look.

Also try opening an issue at the Papermod theme GitHub repo and ask the author(s) to add Mermaid support.

[nicfab]

@nicfab

I edited the single.html, which was under themes/PaperMod/layouts/_default , adding the Mermaid code, and now the files have the following lines:

I opened an issue on GitHub (PaperMod) - Mermaid doesn't work · Issue #849 · adityatelange/hugo-PaperMod · GitHub - but I will be grateful to whoever can help me here.

[nicfab]

The solution for the PaperMod theme is here Mermaid doesn't work · Discussion #850 · adityatelange/hugo-PaperMod · GitHub