Update templates/index.html

templates/index.html

@@ -206,6 +206,48 @@
       margin-top: 4px;
       display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
     }
+    /* ── Markdown rendered elements ── */
+    .bubble p,.best-answer-bubble p,.other-answer-text p,.version-text p { margin: 3px 0; white-space: normal; }
+    .bubble h1,.bubble h2,.bubble h3,.bubble h4,.bubble h5,.bubble h6,
+    .best-answer-bubble h1,.best-answer-bubble h2,.best-answer-bubble h3,
+    .best-answer-bubble h4,.best-answer-bubble h5,.best-answer-bubble h6,
+    .other-answer-text h1,.other-answer-text h2,.other-answer-text h3,
+    .version-text h1,.version-text h2,.version-text h3 {
+      font-weight: 700; line-height: 1.3; margin: 6px 0 2px; white-space: normal;
+    }
+    .bubble h1,.best-answer-bubble h1 { font-size: 1.15em; }
+    .bubble h2,.best-answer-bubble h2 { font-size: 1.05em; }
+    .bubble h3,.best-answer-bubble h3 { font-size: .97em; }
+    .bubble h4,.best-answer-bubble h4,.bubble h5,.best-answer-bubble h5,.bubble h6,.best-answer-bubble h6 { font-size: .9em; }
+    .bubble ul,.bubble ol,.best-answer-bubble ul,.best-answer-bubble ol,
+    .other-answer-text ul,.other-answer-text ol,.version-text ul,.version-text ol {
+      margin: 3px 0 3px 18px; padding: 0; white-space: normal;
+    }
+    .bubble li,.best-answer-bubble li,.other-answer-text li,.version-text li { margin: 1px 0; white-space: normal; }
+    .bubble code,.best-answer-bubble code,.other-answer-text code,.version-text code {
+      font-family: var(--mono); font-size: .87em;
+      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
+      border-radius: 4px; padding: 1px 5px;
+    }
+    .bubble pre,.best-answer-bubble pre,.other-answer-text pre,.version-text pre {
+      background: rgba(0,0,0,.38); border: 1px solid var(--border);
+      border-radius: var(--radius-sm); padding: 10px 12px;
+      overflow-x: auto; margin: 6px 0; white-space: pre;
+      font-family: var(--mono); font-size: .84em; line-height: 1.5;
+    }
+    .bubble pre code,.best-answer-bubble pre code,.other-answer-text pre code,.version-text pre code {
+      background: none; border: none; padding: 0; font-size: inherit;
+    }
+    .bubble blockquote,.best-answer-bubble blockquote,
+    .other-answer-text blockquote,.version-text blockquote {
+      border-left: 3px solid var(--accent); margin: 4px 0;
+      padding: 2px 0 2px 12px; color: var(--muted); white-space: normal;
+    }
+    .bubble hr,.best-answer-bubble hr { border: none; border-top: 1px solid var(--border2); margin: 8px 0; }
+    .bubble a,.best-answer-bubble a,.other-answer-text a,.version-text a {
+      color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
+    }
+    p.md-gap { min-height: 0.6em; margin: 0 !important; padding: 0; }
     /* ── Vote ── */
     .vote-row { display: flex; gap: 4px; align-items: center; margin-top: 6px; }
     .vote-btn {
@@ -879,45 +921,75 @@
       function renderInlineMarkdown(s) {
         let out = esc(String(s || ""));
         out = out.replace(/`([^`]+)`/g, "<code>$1</code>");
+        out = out.replace(/\*\*\*([^*]+)\*\*\*/g, "<strong><em>$1</em></strong>");
+        out = out.replace(/___([^_]+)___/g, "<strong><em>$1</em></strong>");
         out = out.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
-        out = out.replace(/\*([^*]+)\*/g, "<em>$1</em>");
+        out = out.replace(/__([^_]+)__/g, "<strong>$1</strong>");
+        out = out.replace(/\*([^*\s][^*]*[^*\s]|\S)\*/g, "<em>$1</em>");
+        out = out.replace(/_([^_\s][^_]*[^_\s]|\S)_/g, "<em>$1</em>");
+        out = out.replace(/~~([^~]+)~~/g, "<s>$1</s>");
         out = out.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noreferrer">$1</a>');
         return out;
       }
       function renderMarkdown(md) {
         const lines = String(md || "").replace(/\r\n/g, "\n").split("\n");
         const out = [];
-        let inList = false;
-        let inQuote = false;
+        let inList = false, inOList = false, inQuote = false, inCode = false;
+        const codeBuf = [];
+        let lastWasBlank = false;
         const closeBlocks = () => {
-          if (inList) { out.push("</ul>"); inList = false; }
+          if (inList)  { out.push("</ul>");         inList  = false; }
+          if (inOList) { out.push("</ol>");         inOList = false; }
           if (inQuote) { out.push("</blockquote>"); inQuote = false; }
         };
         for (const raw of lines) {
           const line = raw.trimEnd();
-          if (!line.trim()) { closeBlocks(); continue; }
-          if (/^#{1,3}\s+/.test(line)) {
+          if (inCode) {
+            if (/^```/.test(line)) { out.push(`<pre><code>${codeBuf.join("\n")}</code></pre>`); codeBuf.length = 0; inCode = false; }
+            else codeBuf.push(esc(line));
+            continue;
+          }
+          if (/^```/.test(line)) { closeBlocks(); inCode = true; continue; }
+          if (!line.trim()) {
+            closeBlocks();
+            if (!lastWasBlank) out.push('<p class="md-gap"></p>');
+            lastWasBlank = true;
+            continue;
+          }
+          lastWasBlank = false;
+          if (/^#{1,6}\s/.test(line)) {
             closeBlocks();
-            const level = Math.min(3, line.match(/^#+/)[0].length);
-            out.push(`<h${level}>${renderInlineMarkdown(line.replace(/^#{1,3}\s+/, ""))}</h${level}>`);
+            const lvl = Math.min(6, line.match(/^#+/)[0].length);
+            out.push(`<h${lvl}>${renderInlineMarkdown(line.replace(/^#+\s+/, ""))}</h${lvl}>`);
             continue;
           }
-          if (/^>\s?/.test(line)) {
-            if (inList) { out.push("</ul>"); inList = false; }
+          if (/^(-{3,}|\*{3,}|_{3,})$/.test(line.trim())) { closeBlocks(); out.push("<hr>"); continue; }
+          if (/^> ?/.test(line)) {
+            if (inList)  { out.push("</ul>");  inList  = false; }
+            if (inOList) { out.push("</ol>"); inOList = false; }
             if (!inQuote) { out.push("<blockquote>"); inQuote = true; }
-            out.push(`<p>${renderInlineMarkdown(line.replace(/^>\s?/, ""))}</p>`);
+            out.push(`<p>${renderInlineMarkdown(line.replace(/^> ?/, ""))}</p>`);
             continue;
           }
           if (/^[-*]\s+/.test(line)) {
-            if (inQuote) { out.push("</blockquote>"); inQuote = false; }
-            if (!inList) { out.push("<ul>"); inList = true; }
+            if (inQuote)  { out.push("</blockquote>"); inQuote  = false; }
+            if (inOList)  { out.push("</ol>");         inOList  = false; }
+            if (!inList)  { out.push("<ul>");           inList   = true; }
             out.push(`<li>${renderInlineMarkdown(line.replace(/^[-*]\s+/, ""))}</li>`);
             continue;
           }
+          if (/^\d+\.\s+/.test(line)) {
+            if (inQuote)  { out.push("</blockquote>"); inQuote  = false; }
+            if (inList)   { out.push("</ul>");         inList   = false; }
+            if (!inOList) { out.push("<ol>");           inOList  = true; }
+            out.push(`<li>${renderInlineMarkdown(line.replace(/^\d+\.\s+/, ""))}</li>`);
+            continue;
+          }
           closeBlocks();
           out.push(`<p>${renderInlineMarkdown(line)}</p>`);
         }
         closeBlocks();
+        if (inCode) out.push(`<pre><code>${codeBuf.join("\n")}</code></pre>`);
         return out.join("");
       }
       function fmtTime(iso) {
@@ -958,45 +1030,30 @@
       async function animateText(el, text) {
         if (!el) return;
         const mode = S.animMode;
-        const configs = {
-          none: { size: Infinity, delay: 0 },
-          ai: { size: 10, delay: 60 },
-          human: { size: 5, delay: 90 },
-          diffusion: { size: 2, delay: 130 },
-          "diffusion-v2": { size: 1, delay: 170 },
-        };
-        const cfg = configs[mode] || configs.ai;
+        const delays = { none: 0, ai: 60, human: 90, diffusion: 130, "diffusion-v2": 170 };
+        const delay = delays[mode] ?? 60;
         el.classList.remove("answer-reveal", "revealed");
+        const html = renderMarkdown(text);
         if (mode === "none") {
-          el.innerHTML = renderMarkdown(text);
+          el.innerHTML = html;
           setJumpLatest(false);
           return;
         }
-        const words = String(text || "").split(/(\s+)/);
-        let buffer = "";
-        const parts = [];
-        let wordCount = 0;
-        for (const part of words) {
-          buffer += part;
-          if (!/^\s+$/.test(part)) wordCount += 1;
-          if (wordCount >= cfg.size && buffer.trim()) {
-            parts.push(buffer);
-            buffer = "";
-            wordCount = 0;
-          }
-        }
-        if (buffer) parts.push(buffer);
+        const tmp = document.createElement("div");
+        tmp.innerHTML = html;
         el.innerHTML = "";
-        for (const part of parts) {
-          const span = document.createElement("span");
-          span.className = "answer-reveal";
-          span.innerHTML = renderInlineMarkdown(part);
-          el.appendChild(span);
-          requestAnimationFrame(() => span.classList.add("revealed"));
+        for (const node of Array.from(tmp.childNodes)) {
+          const n = node.cloneNode(true);
+          if (n.nodeType === 1) {
+            n.classList.add("answer-reveal");
+            el.appendChild(n);
+            requestAnimationFrame(() => n.classList.add("revealed"));
+          } else {
+            el.appendChild(n);
+          }
           scrollBottom();
-          await sleep(cfg.delay);
+          await sleep(delay);
         }
-        el.innerHTML = renderMarkdown(text);
       }
       function showTyping() {
         removeTyping();