A ```` ```mermaid ```` fence came out of the build as syntax-highlighted CSS. highlight.js has no mermaid grammar, so the fence fell through to auto-detection, which took `graph TD; A-->B;` for selectors and wrapped the diagram source in `hljs-selector-tag` spans. Mermaid could still read it β `textContent` drops the spans β but only if you told it to look at `code.language-mermaid`, and the page flashed the wrongly-coloured source first.
Poops
mermaid fence compiles to <pre class="mermaid">, with no <code> element and the diagram source escaped inside. That is the markup mermaid documents and the default its run() selects on, so loading mermaid on the page is all it takes. The fence info string keeps working: ```mermaid wide tab=deps still becomes class="mermaid wide" data-tab="deps".book-of-spells 1.5 β 2.5, poops-docs-theme 4.2 β 4.5. The one that shows: removeAccents in book-of-spells now folds letters whose mark is written through the glyph β Δ Ε Γ Δ¦ Γ Γ and friends β which slugify inherits, and slugify is what Poops builds heading anchors, collection slugs and permalinks from. ΔorΔe BalaΕ‘eviΔ used to slug to ore-balasevic because the unfolded letter was deleted outright; it is dorde-balasevic now. A site with those letters in a heading or a title will move the URLs they generate β worth a redirect if anything links to the old ones.
mermaid is never syntax-highlighted, through fences, the {% highlight %} tag and the highlight filter alike. Only the language name is special β a JavaScript fence that mentions mermaid is still highlighted as JavaScript.
Poops ships no mermaid and injects no script, so a page with no diagram carries no library, and a diagram on a page that never loads one shows its source as readable text. The trade against the code-fence story is real and stated in the README: highlighting happens at build time to avoid layout shift, and a browser-rendered diagram pops in after paint.