From f3bfd01f9313b8c7e3310ceb6ef37dcf31a3881f Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Fri, 24 Jul 2026 14:45:13 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20popout=20Mermaid=20rendering=20order=20?=
 =?UTF-8?q?=E2=80=94=20run=20before=20highlight.js?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Mermaid now initializes and renders BEFORE highlight.js processes code blocks
- highlight.js skips .language-mermaid blocks to avoid 'Could not find language' warnings
- Code highlighting runs after Mermaid SVG replaces the code block
- Removes duplicate/conflicting hljs calls
---
 frontend/popout.html | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/frontend/popout.html b/frontend/popout.html
index 2bbdbcf..d67e33f 100644
--- a/frontend/popout.html
+++ b/frontend/popout.html
@@ -861,27 +861,27 @@ const RightSidebarManager = {
 
         OutlineManager.init(); RightSidebarManager.init();
 
-        // Highlight code blocks (wait for hljs to be available)
-        if (typeof hljs !== 'undefined') {
-          document.querySelectorAll('pre code').forEach((el) => {
-            hljs.highlightElement(el);
-          });
-        } else {
-          waitForHljs().then(() => {
-            document.querySelectorAll('pre code').forEach((el) => {
-              hljs.highlightElement(el);
+        // Mermaid + code highlighting handled below FIRST (before highlight.js)
+        if (typeof mermaid !== 'undefined') {
+          mermaid.initialize({ startOnLoad: false, theme: document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default' });
+          mermaid.run({ querySelector: '.language-mermaid' }).then(() => {
+            // After Mermaid renders, highlight remaining code blocks (skip mermaid SVGs)
+            document.querySelectorAll('pre code:not(.language-mermaid)').forEach((el) => {
+              if (typeof hljs !== 'undefined') hljs.highlightElement(el);
+            });
+          }).catch(() => {
+            // Mermaid failed — highlight everything else anyway
+            document.querySelectorAll('pre code:not(.language-mermaid)').forEach((el) => {
+              if (typeof hljs !== 'undefined') hljs.highlightElement(el);
             });
           });
+        } else {
+          // No mermaid — just highlight code
+          document.querySelectorAll('pre code').forEach((el) => {
+            if (typeof hljs !== 'undefined') hljs.highlightElement(el);
+          });
         }
 
-        // Render Mermaid diagrams
-        setTimeout(() => {
-          if (typeof mermaid !== 'undefined') {
-            mermaid.initialize({ startOnLoad: false, theme: document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default' });
-            mermaid.run({ querySelector: '.mermaid' }).catch(() => {});
-          }
-        }, 100);
-
         // Hide loading
         document.getElementById('loading').style.opacity = '0';
         setTimeout(() => {