adds initial render of content if it has mermaid

Before this change when the current page contained mermaid content
and was reloaded, we did not have any hooks to trigger the render trick.
(the events `slidechanged` or `ready` do not fire).

This commit adds an initial render call to ensure that mermaid elements
are processed if they are found on the current page.

Also are more in-line with other snippets by adding text/javascript
attribute.

1 files changed, 5 insertions, 2 deletions

diff --git a/layouts/partials/layout/javascript.html b/layouts/partials/layout/javascript.html
index c5c70e2..70f4c8b 100644
--- a/layouts/partials/layout/javascript.html
+++ b/layouts/partials/layout/javascript.html
@@ -72,8 +72,8 @@
 
 {{ if $hasMermaid }}
   {{ $mermaidSrc := resources.GetRemote "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js" }}
-  <script src="{{ $mermaidSrc.RelPermalink }}"></script>
-  <script>
+  <script type="text/javascript" src="{{ $mermaidSrc.RelPermalink }}"></script>
+  <script type="text/javascript">
     mermaid.initialize({startOnLoad: false});
     let render = (event) => {
       let mermaidElems = event.currentSlide.querySelectorAll('.mermaid');
@@ -88,6 +88,9 @@
           }
       });
     };
+    // support current page reload with possible mermaid element
+    render({currentSlide: Reveal.getCurrentSlide()});
+
     Reveal.addEventListener('slidechanged', render);
     Reveal.addEventListener('ready', render);
   </script>