Stop marked processing diagram code as Markdown

This was causing issues with Mermaid state diagrams, as the `*` in the start and end nodes (`[*]`) was being interpreted as emphasis (`<em>` tags were finding their way into the DOM). I found inspiration in [this solution](https://revealjs.com/math/#markdown) in the reveal.js docs which uses a single backtick to wrap text in a `<code>` block, which prevents marked (the JS Markdown processor used by reveal.js) from processing the text as markdown. To accommodate this change I’ve tweaked our JS to strip the code tag out of the Mermaid diagram code. This change may also provide an alternative approach for #35. I’ve upgraded Mermaid to default to 11.0.2, and users can now override this version in their `config.yml` like this: `mermaid_version: 11.0.2`. 11.0.2 is the most recent which didn’t introduce weird rendering issues with state diagrams which I’ve not spent time investigating.
dploeger · Jan 6, 2025 · 1383210 · 1383210
1 parent 87d1dd8
commit 1383210
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/_config.yml b/_config.yml
@@ -37,6 +37,7 @@ reveal_path: reveal.js/
 # mermaid.js diagram integration
 mermaid_diagrams: true
 mermaid_theme: dark # See https://mermaid-js.github.io/mermaid/#/theming?id=deployable-themes
+# mermaid_version: 11.0.2
 
 # Exclude directories and/or files from the conversion
 exclude:

diff --git a/_layouts/reveal.html b/_layouts/reveal.html
@@ -1,4 +1,6 @@
-<!doctype html>
+{%
+	assign mermaid_version = site.mermaid_version | default: '11.0.2'
+%}<!doctype html>
 <html lang="en">
 
 	<head>
@@ -55,7 +57,7 @@
 %}{%
 						assign mermaid_theme = site.mermaid_theme | default: 'dark'
 %}{%
-						assign mermaid_span = '<!-- .slide: class="diagram-slide" data-transition="none"--><span class="diagram-data" style="display:none;">%%{init: {&#39;theme&#39;:&#39;' | append: mermaid_theme | append: '&#39;}}%%'
+						assign mermaid_span = '<!-- .slide: class="diagram-slide" data-transition="none"--><span class="diagram-data" style="display:none;" data-mermaid-config="%%{init: {&#39;theme&#39;:&#39;' | append: mermaid_theme | append: '&#39;}}%%">`'
 %}{%
 						for line in lines
 %}{% 
@@ -68,7 +70,7 @@
 								| replace:'<backgroundimageopacity>','<!-- .slide: data-background-opacity="'
 								| replace:'</backgroundimageopacity>','" -->'
 								| replace:'<mermaid>',mermaid_span
-								| replace:'</mermaid>','</span><div class="diagram-display" style="height: 300px;"></div>'
+								| replace:'</mermaid>','`</span><div class="diagram-display" style="height: 300px;"></div>'
 %}{%
 							assign first_char = line | strip
 								| slice: 0,1
@@ -126,7 +128,7 @@
 					{ src: '{{ site.reveal_path }}plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
 					{ src: '{{ site.reveal_path }}plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
 					{% if site.mermaid_diagrams %}
-					{ src: 'https://cdn.jsdelivr.net/npm/mermaid@9.1.6/dist/mermaid.min.js'},
+					{ src: 'https://cdn.jsdelivr.net/npm/mermaid@{{ mermaid_version }}/dist/mermaid.min.js'},
 					{ src: '{{ 'assets/js/mermaid/reveal-js-mermaid-plugin.js' | relative_url }}'},
 					{% endif %}
 					{% if site.reveal_notes_server %}

diff --git a/assets/js/mermaid/reveal-js-mermaid-plugin.js b/assets/js/mermaid/reveal-js-mermaid-plugin.js
@@ -66,7 +66,7 @@
     var dataElem = getDataElem(slide);
     var svgDiv = getDisplayDiv(slide);
 
-    svgDiv.innerHTML = dataElem.innerHTML;
+    svgDiv.innerHTML = `${dataElem.getAttribute('data-mermaid-config')}\n${dataElem.getElementsByTagName('code')[0].innerHTML}`;
 
     mermaid.flowchartConfig
     var config = {};