fix: popout Mermaid rendering order — run before highlight.js

- 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

@@ -861,27 +861,27 @@ const RightSidebarManager = {
 
         OutlineManager.init(); RightSidebarManager.init();
 
-        // Highlight code blocks (wait for hljs to be available)
+        // Mermaid + code highlighting handled below FIRST (before highlight.js)
-        if (typeof hljs !== 'undefined') {
+        if (typeof mermaid !== 'undefined') {
-          document.querySelectorAll('pre code').forEach((el) => {
+          mermaid.initialize({ startOnLoad: false, theme: document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default' });
-            hljs.highlightElement(el);
+          mermaid.run({ querySelector: '.language-mermaid' }).then(() => {
-          });
+            // After Mermaid renders, highlight remaining code blocks (skip mermaid SVGs)
-        } else {
+            document.querySelectorAll('pre code:not(.language-mermaid)').forEach((el) => {
-          waitForHljs().then(() => {
+              if (typeof hljs !== 'undefined') hljs.highlightElement(el);
-            document.querySelectorAll('pre code').forEach((el) => {
+            });
-              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(() => {