fixed mermaid presentation of materials

_layouts/presentation.html

@@ -37,7 +37,8 @@
     <textarea id="source">
 {{ content }}
     </textarea>
-    <script src="https://gnab.github.io/remark/downloads/remark-latest.min.js" type="text/javascript"></script>
+
+    <script src="{{'/assets/js/remark-latest.min.js' | relative_url}}" type="text/javascript"></script>
     <script src="{{'/assets/js/remark-macros-jm.js' | relative_url}}" type="text/javascript"></script>
     <script type="text/javascript" async
       src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML" async>
@@ -55,15 +56,26 @@
 	  countIncrementalSlides: false
       });
 
+      // Add event listener for slide changes
+     slideshow.on('afterShowSlide', async function (event) {
+	 console.log('Slide changed to: ', event);
+	 // Your custom callback code here
+	 // Get the div with the class name 'remark-visible' and 'mermaid' inside 'remark-visible'
+         mermaidElements = document.getElementsByClassName('remark-visible')[0].getElementsByClassName('mermaid')
+         console.log('ElementList', mermaidElements);
+         // Convert the NodeList to an array (optional, if you need array methods)
+         const mermaidElementsArray = Array.from(mermaidElements);
+
+	 await mermaid.run({
+	     nodes: mermaidElementsArray
+	 });
+    });
+
       var config = {
 	logLevel:1,
 	cloneCssStyles:false,
 	useMaxWidth:true,
-	startOnLoad:true,
-	htmlLabels:true,
-	callback:function(id){
-            console.log(id,' rendered');
-        },
+	startOnLoad:false,
 	flowchart:{
 	    curve:'linear',
 	    fontSize:20,
@@ -74,44 +86,41 @@
       mermaid.initialize(config);
     </script>
 
-    
     <script type="text/javascript" src="{{site.baseurl}}/assets/js/qrcode.js"></script>
     <script>
       // this script was copied from  https://github.com/darcamo/remarkjs_template
       // Find an element with the #qrcode id and replace it with the a QR code
-         function prepare_qr_code() {
-             var element = document.getElementById("qrcode");
-             if (element !== null) {
-                 var url = element.textContent;
-                 element.textContent = "";
-                 var qrcode = new QRCode("qrcode", {
-                     text: url,
-                     width: 128,
-                     height: 128,
-                     colorDark : "black",
-                     colorLight : "white",
-                     correctLevel : QRCode.CorrectLevel.H
-                 });
-             }
-         }
-
-
-         // this script was copied from  https://github.com/darcamo/remarkjs_template
-         // Add any javascript function that changes the presentation here, such as changing the QR code, updating a chart, etc.
-         window.addEventListener("load", function() {
-             // Even though we are executing code in the "load" event of the
-             // window, directly calling the functions we want might not work
-             // because it needs to be run after other code that also runs in
-             // the load event. Therefore, we use a setTimeout to sleep for 1
-             // second before calling the functions
-             setTimeout(function(){
-                 prepare_qr_code();
-             }, 500);
-         });
-        </script>
-
-
-	<div class="my-header">
+      function prepare_qr_code() {
+          var element = document.getElementById("qrcode");
+          if (element !== null) {
+              var url = element.textContent;
+              element.textContent = "";
+              var qrcode = new QRCode("qrcode", {
+                  text: url,
+                  width: 128,
+                  height: 128,
+                  colorDark : "black",
+                  colorLight : "white",
+                  correctLevel : QRCode.CorrectLevel.H
+              });
+          }
+      }
+      
+      // this script was copied from  https://github.com/darcamo/remarkjs_template
+      // Add any javascript function that changes the presentation here, such as changing the QR code, updating a chart, etc.
+      window.addEventListener("load", async function() {
+          // Even though we are executing code in the "load" event of the
+          // window, directly calling the functions we want might not work
+          // because it needs to be run after other code that also runs in
+          // the load event. Therefore, we use a setTimeout to sleep for 1
+          // second before calling the functions
+          await prepare_qr_code();
+      });
+
+    </script>
+
+
+    <div class="my-header">
         <img src="{{site.baseurl}}/assets/img/favicon.ico" style="height: 30px;"/> 
     </div>
 

_layouts/presentation_production.html

@@ -44,7 +44,6 @@
       src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML" async>
     <script type="text/javascript" src="{{'assets/js/mathjax-sre.js' | relative_url}}"></script>
     <script type="text/javascript" src="{{'assets/js/html2canvas.min.js' | relative_url}}"></script>
-    <script type="text/javascript" src="{{'assets/js/presentation-export.js' | relative_url}}"></script>
     <script type="text/javascript" src="{{site.mermaid}}"></script>
 
     <script type="text/javascript">
@@ -57,15 +56,26 @@
 	  countIncrementalSlides: false
       });
 
+      // Add event listener for slide changes
+     slideshow.on('afterShowSlide', async function (event) {
+	 console.log('Slide changed to: ', event);
+	 // Your custom callback code here
+	 // Get the div with the class name 'remark-visible' and 'mermaid' inside 'remark-visible'
+         mermaidElements = document.getElementsByClassName('remark-visible')[0].getElementsByClassName('mermaid')
+         console.log('ElementList', mermaidElements);
+         // Convert the NodeList to an array (optional, if you need array methods)
+         const mermaidElementsArray = Array.from(mermaidElements);
+
+	 await mermaid.run({
+	     nodes: mermaidElementsArray
+	 });
+    });
+
       var config = {
 	logLevel:1,
 	cloneCssStyles:false,
 	useMaxWidth:true,
-	startOnLoad:true,
-	htmlLabels:true,
-	callback:function(id){
-            console.log(id,' rendered');
-        },
+	startOnLoad:false,
 	flowchart:{
 	    curve:'linear',
 	    fontSize:20,
@@ -98,21 +108,20 @@
       
       // this script was copied from  https://github.com/darcamo/remarkjs_template
       // Add any javascript function that changes the presentation here, such as changing the QR code, updating a chart, etc.
-      window.addEventListener("load", function() {
+      window.addEventListener("load", async function() {
           // Even though we are executing code in the "load" event of the
           // window, directly calling the functions we want might not work
           // because it needs to be run after other code that also runs in
           // the load event. Therefore, we use a setTimeout to sleep for 1
           // second before calling the functions
-          setTimeout(function(){
-              prepare_qr_code();
-          }, 500);
+          await prepare_qr_code();
       });
+
     </script>
 
 
     <div class="my-header">
-      <img src="{{site.baseurl}}/assets/img/favicon.ico" style="height: 30px;"/> 
+        <img src="{{site.baseurl}}/assets/img/favicon.ico" style="height: 30px;"/> 
     </div>
 
  </body>
@@ -124,4 +133,3 @@ class center middle inverse
 ```ruby
 als erste Zeilen in Slide
 -->
-