Render mermaid codeblocks #479
Conversation
ben-krieger
force-pushed
the
mermaid-code-fence
branch
from
f6e3c6f to
733263f
Compare
ben-krieger
force-pushed
the
mermaid-code-fence
branch
3 times, most recently
from
f72414f to
cb08968
Compare
|
Thanks for your effort. I would prefer an implementation using rendering hooks as this approach can be used for other extensions e.g. KaTeX as well. This way, it should be also possible to re-use the same code from the existing shortcode. |
I didn't realize you could do that for codeblocks now in Hugo! I'll take a look. |
|
And the solution is literally given in the docs... https://gohugo.io/content-management/diagrams/#mermaid-diagrams But there is a small amount of work needed to integrate with the existing mermaid shortcode so that using a codeblock and a shortcode in the same page doesn't result in importing and initializing mermaid twice. |
|
The shortcode has already a check using the exact same code in the render template should avoid double imoorts. |
I just mean change |
ben-krieger
force-pushed
the
mermaid-code-fence
branch
from
cb08968 to
b9caafe
Compare
ben-krieger
force-pushed
the
mermaid-code-fence
branch
from
b9caafe to
04e6e6b
Compare
|
I removed |
| // Fix height of mermaid SVG elements (see https://github.com/mermaid-js/mermaid/issues/2481) | ||
| callback: (id) => { | ||
| document.getElementById(id).setAttribute("height", "100%") | ||
| } |
There was a problem hiding this comment.
Should I move this change to a separate PR?
There was a problem hiding this comment.
Yes, please create a dedicated PR, make it easier in case we need to revert it. Wondering why this was not fixed upstream yet if a fix would be that simple 🤔
ben-krieger
changed the title
| <!-- prettier-ignore-start --> | ||
| {{ if not (.Page.Scratch.Get "mermaid") }} | ||
| <!-- Include mermaid only first time --> | ||
| <script defer src="{{ index (index .Site.Data.assets "mermaid.js") "src" | relURL }}"></script> | ||
| {{ .Page.Scratch.Set "mermaid" true }} | ||
| {{ end }} | ||
| <!-- prettier-ignore-end --> | ||
|
|
||
| {{ .Page.Scratch.Set "mermaid" true }} | ||
| <pre class="gdoc-mermaid mermaid"> | ||
| {{- .Inner -}} | ||
| </pre> |
There was a problem hiding this comment.
Is there somewhere in the docs to specify a minimum Hugo version? This requires v0.93.0 or later, which was only released at the end of February 2022.
There was a problem hiding this comment.
Yes there are three files to change:
| @@ -22,6 +22,12 @@ npm install | |||
|
|
|||
| # run the build script to build required assets | |||
| npm run build | |||
|
|
|||
There was a problem hiding this comment.
I would like to move this to a dedicated PR as well and implement it as a reusable NPM script. It also needs to be documented in the docs as well.
This PR adds support for rendering mermaid in codeblocks / code fences.
Examples I was able to find for this feature, like https://anis.se/posts/add-mermaidjs-support-to-hugo/, had a few issues.
Sorry for not creating an issue first, like it recommends in CONTRIBUTING.md. However, I figured that this probably wasn't something that would be desired for the mainline release, since it changes existing behavior. If I'm wrong, maybe it can be put behind a config flag.
I also inserted a personal fix for mermaid-js/mermaid#2481, which may need to be omitted if this PR is to be considered for merge.
Maintainers: feel free to close this PR if you're not interested in the feature. I just hope that it helps some poor fool like past me who searches for "geekdoc mermaid codeblock / code fence support!"
EDIT: My branch is currently based off of v0.33.2, because Mermaid v9.1.4 is broken in such a way that having multiple sequence diagrams in one page cumulatively joins them! So sequence 1, sequence 1+2, sequence 1+3.
EDIT 2: Mermaid v9.1.5 and v9.1.6 seem to fix the error, so I will rebase this to merge into main, which already has updated to v9.1.5.
EDIT 3: The mermaid 9.1.4 bug being referenced was mermaid-js/mermaid#3305 and was fixed here: mermaid-js/mermaid#3310