Implement syntax highlighting for code blocks in responses

frontend/css/syntax.css

@@ -1,4 +1,23 @@
 /* ── Syntax Highlighted Code Blocks ── */
+pre {
+  margin: 8px 0;
+  padding: 0;
+  background: transparent;
+  overflow-x: auto;
+}
+
+pre code {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  line-height: 1.6;
+  border-radius: 6px;
+  padding: 8px 12px;
+  overflow-x: auto;
+  white-space: pre;
+  background: var(--bg) !important;
+}
+
 .issue-snippet pre,
 .suggest-example pre {
   margin: 0;

frontend/index.html

@@ -6274,6 +6274,7 @@ <h2 id="collabDrawerTitle">Live Collaboration</h2>
   }, 25000);
 })();
 </script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/14.0.0/marked.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
 <script src="js/syntax-highlighting.js"></script>
 </body>

frontend/js/syntax-highlighting.js

@@ -13,19 +13,37 @@
 
   function highlightAllCode() {
     if (typeof hljs === 'undefined') return;
-    document.querySelectorAll('.issue-snippet pre code, .suggest-example pre code').forEach(block => {
+    document.querySelectorAll('pre code').forEach(block => {
       if (block.dataset.highlighted) return;
       hljs.highlightElement(block);
     });
   }
 
-  // Expose globally so renderDebug / renderSuggest etc. can call it
+  function renderMarkdownWithSyntaxHighlight(markdown) {
+    if (typeof marked === 'undefined' || typeof hljs === 'undefined') {
+      return markdown;
+    }
+
+    const renderer = new marked.Renderer();
+    renderer.code = function(code, language) {
+      const validLanguage = language && hljs.getLanguage(language) ? language : 'plaintext';
+      const highlighted = hljs.highlight(code, { language: validLanguage }).value;
+      return `<pre><code class="language-${validLanguage} hljs">${highlighted}</code></pre>`;
+    };
+
+    try {
+      return marked.parse(markdown, { renderer });
+    } catch (e) {
+      console.warn('Markdown parsing failed:', e);
+      return markdown;
+    }
+  }
+
   window.highlightAllCode = highlightAllCode;
+  window.renderMarkdownWithSyntaxHighlight = renderMarkdownWithSyntaxHighlight;
 
-  // Re-apply theme whenever data-theme changes
   const observer = new MutationObserver(applyTheme);
   observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
 
-  // Run once on load
   applyTheme();
 })();