feat: auto detect Mermaid diagrams

Via the ```mermaid code fences.

Deprecate the Params diagram setting

Close #2643

wowchemy/assets/js/wowchemy-slides.js

@@ -4,8 +4,6 @@
 
 import * as params from '@params';
 
-import {fixMermaid} from './wowchemy-utils';
-
 // Enable core slide features.
 var enabledPlugins = [RevealMarkdown, RevealHighlight, RevealSearch, RevealNotes, RevealMath.MathJax3, RevealZoom];
 
@@ -140,9 +138,4 @@ if (params.slides.diagram) {
   mermaidOptions['startOnLoad'] = false;
 
   mermaid.initialize(mermaidOptions);
-
-  // Fix Mermaid conflict with Hightlight JS.
-  document.addEventListener('DOMContentLoaded', function () {
-    fixMermaid(false);
-  });
 }

wowchemy/assets/js/wowchemy-theming.js

@@ -7,7 +7,6 @@
  **************************************************/
 
 import {fadeIn} from './wowchemy-animation';
-import {fixMermaid} from './wowchemy-utils';
 
 const body = document.body;
 
@@ -192,8 +191,7 @@ function renderThemeVariation(isDarkTheme, themeMode = 2, init = false) {
       console.debug('Initializing Mermaid with light theme');
       if (init) {
         /** @namespace window.mermaid **/
-        window.mermaid.initialize({startOnLoad: false, theme: 'default', securityLevel: 'loose'});
-        fixMermaid(true);
+        window.mermaid.initialize({startOnLoad: true, theme: 'default', securityLevel: 'loose'});
       } else {
         // Have to reload to re-initialise Mermaid with the new theme and re-parse the Mermaid code blocks.
         location.reload();
@@ -219,8 +217,7 @@ function renderThemeVariation(isDarkTheme, themeMode = 2, init = false) {
       console.debug('Initializing Mermaid with dark theme');
       if (init) {
         /** @namespace window.mermaid **/
-        window.mermaid.initialize({startOnLoad: false, theme: 'dark', securityLevel: 'loose'});
-        fixMermaid(true);
+        window.mermaid.initialize({startOnLoad: true, theme: 'dark', securityLevel: 'loose'});
       } else {
         // Have to reload to re-initialise Mermaid with the new theme and re-parse the Mermaid code blocks.
         location.reload();

wowchemy/assets/js/wowchemy-utils.js

@@ -5,31 +5,6 @@
  *  Wowchemy Utilities
  **************************************************/
 
-/**
- * Fix Mermaid.js clash with Highlight.js.
- * Refactor Mermaid code blocks as divs to prevent Highlight parsing them and enable Mermaid to parse them.
- * @param {boolean} render
- */
-function fixMermaid(render = false) {
-  let mermaids = [];
-  // Note that `language-mermaid` class is applied to <code> block within <pre>, so we wish to replace parent node.
-  [].push.apply(mermaids, document.getElementsByClassName('language-mermaid'));
-  for (let i = 0; i < mermaids.length; i++) {
-    // Convert <pre><code></code></pre> block to <div> and add `mermaid` class so that Mermaid will parse it.
-    let mermaidCodeElement = mermaids[i];
-    let newElement = document.createElement('div');
-    newElement.innerHTML = mermaidCodeElement.innerHTML;
-    newElement.classList.add('mermaid');
-    if (render) {
-      window.mermaid.mermaidAPI.render(`mermaid-${i}`, newElement.textContent, function (svgCode) {
-        newElement.innerHTML = svgCode;
-      });
-    }
-    mermaidCodeElement.parentNode.replaceWith(newElement);
-  }
-  console.debug(`Processed ${mermaids.length} Mermaid code blocks`);
-}
-
 /**
  * @param {Element} parent
  * @param {Element} child
@@ -58,4 +33,4 @@ function scrollParentToChild(parent, child) {
   }
 }
 
-export {fixMermaid, scrollParentToChild};
+export {scrollParentToChild};

wowchemy/assets/js/wowchemy.js

@@ -203,7 +203,7 @@ function fixHugoOutput() {
   $("input[type='checkbox'][disabled]").parents('ul').addClass('task-list');
 
   // Bootstrap table style is opt-in and Goldmark doesn't add it.
-  $("table").addClass('.table');
+  $('table').addClass('.table');
 }
 
 // Get an element's siblings.

wowchemy/assets/scss/wowchemy/elements/_icon.scss

@@ -22,10 +22,10 @@
 }
 
 .task-list input[type='checkbox']:not(:checked) {
-  width: .9em;
-  height: .9em;
+  width: 0.9em;
+  height: 0.9em;
 }
 
 .task-list input[type='checkbox']:checked::after {
-  content:"✅";
+  content: '✅';
 }

wowchemy/config.yaml

@@ -8,7 +8,10 @@ markup:
         block: true
         title: true
   highlight:
-    codeFences: false
+    codeFences: true
+    noHl: true
+    lineNumbersInTable: false
+    noClasses: false
   tableOfContents:
     startLevel: 2
     endLevel: 3
@@ -31,7 +34,7 @@ sitemap:
   changefreq: weekly
 module:
   hugoVersion:
-    min: '0.87.0'
+    min: '0.95.0'
     extended: true
   mounts:
     - source: content

wowchemy/layouts/_default/_markup/render-codeblock-mermaid.html

@@ -0,0 +1,4 @@
+<div class="mermaid">
+  {{- .Inner | safeHTML }}
+</div>
+{{ .Page.Store.Set "has_mermaid" true }}

wowchemy/layouts/partials/site_js.html

@@ -28,7 +28,8 @@
         {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.fancybox.url $js.fancybox.version) $js.fancybox.sri | safeHTML }}
       {{ end }}
 
-      {{ if or .Params.diagram site.Params.features.diagram.enable }}
+      {{ if .Page.Store.Get "has_mermaid" }}
+        {{/* Title attribute is used by wowchemy-theming.js to detect Mermaid */}}
         {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"mermaid\"></script>" (printf $js.mermaid.url $js.mermaid.version) $js.mermaid.sri | safeHTML }}
       {{ end }}
 

wowchemy/layouts/shortcodes/diagram.html

@@ -1,3 +0,0 @@
-<div class="mermaid">
-  {{- safeHTML .Inner -}}
-</div>