diff --git a/_layouts/presentation.html b/_layouts/presentation.html
index d5e79ba0d13dee20b4699678fd11f5bf63eeebfe..95d8ea6c34c240cce56513136df29cc9f64d48e6 100644
--- a/_layouts/presentation.html
+++ b/_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>
diff --git a/_layouts/presentation_production.html b/_layouts/presentation_production.html
index ee4e57cf2748d159c8888bc74a6f930d2082642e..95d8ea6c34c240cce56513136df29cc9f64d48e6 100644
--- a/_layouts/presentation_production.html
+++ b/_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
-->
-