Mermaid diagrams fail to render

[chalin]

Since the following change has been applied, some previously working Mermaid diagrams report "syntax error":

• Auto activation of mermaid diagrams (via use of hugo render hook) #990

But nothing has changed in the diagrams and the live Mermaid editor are fine with the Mermaid code.

I believe that the problem stems from the decision to render the code block as a <div> rather than <pre>:

docsy/layouts/_default/_markup/render-codeblock-mermaid.html

Lines 3 to 5 in 26d4d11

	<div class="mermaid">
	{{- .Inner | safeHTML }}
	</div>

Ok, after some digging, I've found that <pre> is _required, see Requirements for the Mermaid API:

References:

• https://github.com/google/docsy/pull/990/files#r997232082
• Screenshot when rendering fails for page https://opentelemetry.io/docs/demo/architecture/:

  

/cc @stephanlachnit @deining

[chalin]

Oh, I forgot to mention that the safeHTML also contributes to the diagram not rendering.

[deining]

Have a look at yesterday's commit to the hugDoc's repo:

gohugoio/hugoDocs@eddd25f

This commit does exactly does what you request: replacing <div> with <pre>. We should following and do the same in our repo.

From the commit message:

MermaidJS now specifies to write chart's markdown within a `pre` HTML tag to improve semantics.

Side note: hugoDocs are using ESM import for mermaid now:

gohugoio/hugoDocs@b2a23b6

[chalin]

Oh great! Thanks for that reference.