Mermaid für Github Pages konfigurieren
So, nachdem ich es nun endlich geschafft habe, hier in meinem Github Pages Blog auch Mermaid Codeblöcke tatsächlich durch Mermaid rendern und als Grafik darstellen zu lassen, will ich schnell aufschreiben, was man dafür tun muss. Sonst habe ich das übermorgen auch schon wieder vergessen. 🙈
Zweimal JavaScript
Es braucht zwei JavaScript “Dinge”, die passieren müssen:
- Es muss Mermaid selbst so inkludiert werden, dass die entsprechenden
<script>Kommandos im durch Jekyll erzeugten HTML landen. Dieses reine Laden könnte man zwar auch über die_config.ymlerledigen, aber wir brauchen noch etwas Zweites, nämlich ein Ausführen von JavaScript Code: - Damit Mermaid tatsächlich auch angestoßen wird und Codeblöcke mit Mermaid Code verarbeiten kann, müssen wir ein bisschen JavaScript Code ablegen/injizieren, in dem auf das Fertigladen des DOM gewartet und dann reagiert wird.
Da Schritt 2 nicht über die _config.yml erledigt werden kann und da wir beides im <head> haben wollen, machen wir das wie folgt:
- Wenn es noch kein Verzeichnis
_includesim Github Pages Repository gibt, legen wir dies an. - Darin legen wir noch ein Verzeichnis namens
headan (ohne Unterstrich). - In diesem Verzeichnis
_includes/headlegen wir jetzt eine Datei namenscustom.htmlmit folgendem Inhalt an:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
mermaid.initialize({
startOnLoad: false,
theme: 'forest',
securityLevel: 'loose'
});
document.addEventListener("DOMContentLoaded", async () => {
// Codeblöcke mit Mermaid-Klasse finden
document.querySelectorAll('code.language-mermaid').forEach((block) => {
const pre = block.parentElement;
const container = document.createElement('div');
container.className = 'mermaid';
container.textContent = block.textContent;
pre.parentNode.replaceChild(container, pre);
});
await mermaid.run();
});
</script>
Dabei ist es natürlich Geschmackssache, ob man sich in Zeile 5 für das forest Theme von Mermaid entscheidet oder für ein anderes.
Hier wird also sowohl der Mermaid Code aus dem CDN geladen und mit einem Theme initialisiert, als auch ein EventListener angelegt, der immer dann feuert, wenn eine Seite (v.a. eben auch eine Seite mit Mermaid Code) fertig geladen wurde. Dann werden alle als Mermaid Code gekennzeichneten Codeblöcke bearbeitet und gerendert.
Damit das funktioniert also immer Mermaid Code als solchen im Markdown kennzeichnen:
1
2
3
```mermaid
<Hier steht Mermaid Code>
```
🔲
Hinterlasse einen Kommentar