Update templates/index.html

templates/index.html

@@ -1445,11 +1445,30 @@
        SYNTAX HIGHLIGHTER (lightweight)
     ═══════════════════════════════════════════════ */
     function syntaxHighlight(code, lang) {
+      // If the server already provided HTML-highlighted output (e.g. Pygments
+      // rendered <span class="tok-..."> tokens), it may arrive as raw
+      // markup or as escaped entities (&lt;span ...). In those cases we should
+      // render the existing highlight rather than escaping it again.
+      function decodeEntities(s) {
+        return String(s)
+          .replace(/&lt;/g, '<')
+          .replace(/&gt;/g, '>')
+          .replace(/&amp;/g, '&')
+          .replace(/&quot;/g, '"')
+          .replace(/&#39;/g, "'");
+      }
+
+      // Quick heuristic: if code contains token spans (either raw or escaped),
+      // decode/return as-is so markup renders correctly.
+      if (/<span class=\"tok-/.test(code) || /&lt;span class=\"tok-/.test(code)) {
+        return /&lt;span/.test(code) ? decodeEntities(code) : String(code);
+      }
+
       const e = esc(code);
       if (!lang || lang === 'text' || lang === 'plain') return e;
       return e
         // comments
-        .replace(/(\/\/[^\n]*|#[^\n]*|\/\*[\s\S]*?\*\/)/g, '<span class="tok-cmt">$1</span>')
+        .replace(/(\/\/[^\n]*|#[^\n]*|\/\*[\s\S]*?\*\//g, '<span class="tok-cmt">$1</span>')
         // strings
         .replace(/(["'`])((?:\\.|(?!\1)[^\\])*)\1/g, '<span class="tok-str">$1$2$1</span>')
         // numbers
@@ -1459,7 +1478,7 @@
         // function calls
         .replace(/\b([a-zA-Z_]\w*)\s*(?=\()/g, '<span class="tok-fn">$1</span>')
         // operators
-        .replace(/([=!<>&|+\-*/%^~]+)/g, '<span class="tok-op">$1</span>');
+        .replace(/([=!<>\&|+\-*/%^~]+)/g, '<span class="tok-op">$1</span>');
     }
 
     /* ═══════════════════════════════════════════════
@@ -2606,9 +2625,12 @@
     }
 
     function autoGrow(el) {
-      el.style.height = '0';
-      const next = Math.min(el.scrollHeight, 180) + 'px';
-      requestAnimationFrame(() => { el.style.height = next; });
+      // Use 'auto' so browsers recalculate scrollHeight reliably, then
+      // clamp to a sensible min/max so the compose area can shrink back.
+      el.style.height = 'auto';
+      let h = Math.min(el.scrollHeight, 180);
+      if (h < 40) h = 40;
+      requestAnimationFrame(() => { el.style.height = h + 'px'; });
     }
 
     /* ═══════════════════════════════════════════════