Code editor/renderer configured against pre tags has broken mermaid integration #5245

New Issue

OVERLORD · 2026-02-05T09:51:07+03:00

OVERLORD commented

2026-02-05 09:51:07 +03:00

Originally created by @terah on GitHub (Apr 2, 2025).

Describe the Bug

Hi guys,

I've got this code in the customisation section of admin.

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

Then, throughout the pages I've got snippets like this:

<pre class="mermaid">
  pie title NETFLIX
         "Time spent looking for movie" : 90
         "Time spent watching it" : 10

</pre>

In a recent Bookstack release, the mermaid charts stopped working, which looks to be part of some enhancements around the code viewer.

I have tried to swap out the pre tags with div tags which worked OK in the markdown editor but failed to render in the WYSIWYG editor.

So, my question is this: Can you make a tweak to the code editor to ignore a configurable list of css classes or some other way of disabling this functionality on a case by case basis?

Steps to Reproduce

Edit a page
Add a mermaid chart using pre tags
Add the mermaid code snippet to the page customisation block

Expected Behaviour

See a mermaid chart on the page

Screenshots or Additional Context

It appears that the code editor intercepts all 'pre' tag code blocks.

Browser Details

Brave Version 1.76.82 Chromium: 134.0.6998.178 (Official Build) (arm64)

Exact BookStack Version

BookStack v25.02.1

Originally created by @terah on GitHub (Apr 2, 2025). ### Describe the Bug Hi guys, I've got this code in the customisation section of admin. ``` <script type="module"> import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true }); </script> ``` Then, throughout the pages I've got snippets like this: ``` <pre class="mermaid"> pie title NETFLIX "Time spent looking for movie" : 90 "Time spent watching it" : 10 </pre> ``` In a recent Bookstack release, the mermaid charts stopped working, which looks to be part of some enhancements around the code viewer. I have tried to swap out the pre tags with div tags which worked OK in the markdown editor but failed to render in the WYSIWYG editor. So, my question is this: Can you make a tweak to the code editor to ignore a configurable list of css classes or some other way of disabling this functionality on a case by case basis? ### Steps to Reproduce 1. Edit a page 2. Add a mermaid chart using pre tags 3. Add the mermaid code snippet to the page customisation block ### Expected Behaviour See a mermaid chart on the page ### Screenshots or Additional Context It appears that the code editor intercepts all 'pre' tag code blocks. ### Browser Details Brave Version 1.76.82 Chromium: 134.0.6998.178 (Official Build) (arm64) ### Exact BookStack Version BookStack v25.02.1

OVERLORD added the 🐕 Support label 2026-02-05 09:51:07 +03:00

OVERLORD closed this issue

2026-02-05 09:51:09 +03:00

OVERLORD commented

2026-02-05 09:51:11 +03:00

@ssddanbrown commented on GitHub (Apr 7, 2025):

Can you make a tweak to the code editor to ignore a configurable list of css classes or some other way of disabling this functionality on a case by case basis?

That's not an option provided, nor am I too keen to add options to work around issues/compatibility with non-supported customizations.

Really, the tricky part is a matter of timing. The code handling is running before the mermaid code due to the import.

Here's my take on an altered version of your customization code:

<script src="https://cdn.jsdelivr.net/npm/mermaid@11.6.0/dist/mermaid.min.js"></script>
<script type="module">
  mermaid.initialize({ startOnLoad: false });

  const codeBlocks = document.querySelectorAll('.page-content pre.mermaid, .page-content pre code.language-mermaid');
  const mermaidBlocks = [];
  for (const codeBlock of codeBlocks) {
    const mermaidBlock = document.createElement('div');
    mermaidBlock.innerHTML = codeBlock.innerHTML;
    mermaidBlocks.push(mermaidBlock);

    const replaceTarget = (codeBlock.nodeName === 'CODE') ? codeBlock.parentElement : codeBlock;
    replaceTarget.after(mermaidBlock);
    replaceTarget.remove();  
  }

  mermaid.run({
    nodes: mermaidBlocks,
  });
</script>

I've only done a quick bit of testing, and this could cause problems in other parts of the application.

This code sneaks in before the normal app code, and specifically converts the existing code blocks to divs automatically on run, before passing them to mermaid for conversion.

The above should work with your original <pre> format mermaid blocks, but I've also made it work with normal BookStack WYSIWYG created code blocks where mermaid is set as the language:

@ssddanbrown commented on GitHub (Apr 7, 2025): > Can you make a tweak to the code editor to ignore a configurable list of css classes or some other way of disabling this functionality on a case by case basis? That's not an option provided, nor am I too keen to add options to work around issues/compatibility with non-supported customizations. Really, the tricky part is a matter of timing. The code handling is running before the mermaid code due to the import. Here's my take on an altered version of your customization code: ```html <script src="https://cdn.jsdelivr.net/npm/mermaid@11.6.0/dist/mermaid.min.js"></script> <script type="module"> mermaid.initialize({ startOnLoad: false }); const codeBlocks = document.querySelectorAll('.page-content pre.mermaid, .page-content pre code.language-mermaid'); const mermaidBlocks = []; for (const codeBlock of codeBlocks) { const mermaidBlock = document.createElement('div'); mermaidBlock.innerHTML = codeBlock.innerHTML; mermaidBlocks.push(mermaidBlock); const replaceTarget = (codeBlock.nodeName === 'CODE') ? codeBlock.parentElement : codeBlock; replaceTarget.after(mermaidBlock); replaceTarget.remove(); } mermaid.run({ nodes: mermaidBlocks, }); </script> ``` _I've only done a quick bit of testing, and this could cause problems in other parts of the application._ This code sneaks in before the normal app code, and specifically converts the existing code blocks to divs automatically on run, before passing them to mermaid for conversion. The above should work with your original `<pre>` format mermaid blocks, but I've also made it work with normal BookStack WYSIWYG created code blocks where `mermaid` is set as the language: ![Image](https://github.com/user-attachments/assets/314948e6-9f8a-4538-904c-24339a55e04b)

OVERLORD commented

2026-02-05 09:51:13 +03:00

@terah commented on GitHub (Apr 11, 2025):

That's worked great!

Thank you.

I really appreciate you taking the time to take a look at this for me.

@terah commented on GitHub (Apr 11, 2025): That's worked great! Thank you. I really appreciate you taking the time to take a look at this for me.

OVERLORD commented

2026-02-05 09:51:14 +03:00

@ssddanbrown commented on GitHub (Apr 12, 2025):

Good to hear! I'll therefore close off this support thread.

@ssddanbrown commented on GitHub (Apr 12, 2025): Good to hear! I'll therefore close off this support thread.