Preserve KaTeX line rendering details

src/capture.ts

@@ -120,7 +120,9 @@ function normalizeCopiedHtml(html: string): string {
   const $ = cheerio.load(html, {}, false);
 
   $("script, style, iframe, object, embed, form, button, textarea, input, nav").remove();
-  $("svg").remove();
+  $("svg")
+    .filter((_, element) => $(element).parents(".katex, .katex-display").length === 0)
+    .remove();
 
   function escapeCode(value: string): string {
     return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -451,8 +453,21 @@ async function extractConversation(sourceUrl: string): Promise<ExtractedConversa
           const inMathOrKatex =
             element.closest("math, .katex, .katex-display") !== null ||
             /\bkatex(?:-|$)/.test(elementClass);
+          const inKatexSvg = inMathOrKatex && ["svg", "path", "line"].includes(element.tagName.toLowerCase());
           const keep =
             ["href", "src", "alt", "title", "colspan", "rowspan"].includes(name) ||
+            (inKatexSvg &&
+              [
+                "aria-hidden",
+                "class",
+                "d",
+                "fill",
+                "height",
+                "style",
+                "viewbox",
+                "width",
+                "xmlns"
+              ].includes(name)) ||
             (inMathOrKatex &&
               [
                 "aria-hidden",

src/render.ts

@@ -113,7 +113,7 @@ h1 { margin: 0; font-size: clamp(28px, 5vw, 44px); line-height: 1.12; letter-spa
 .content math { color: inherit; font-family: math, "STIX Two Math", "Cambria Math", "Noto Sans Math", serif; font-size: 1.02em; }
 .content > math { display: block; max-width: 100%; margin: 0.95em 0; overflow-x: auto; overflow-y: hidden; }
 .content p math, .content li math { vertical-align: -0.08em; }
-.content .katex-display { max-width: 100%; padding: 14px 16px; overflow-x: auto; overflow-y: hidden; border-radius: 8px; background: var(--soft); }
+.content .katex-display { max-width: 100%; padding: 14px 16px; overflow-x: auto; overflow-y: visible; border-radius: 8px; background: var(--soft); }
 .content a[data-citation] { display: inline-flex; align-items: center; gap: 5px; max-width: min(100%, 260px); min-height: 24px; margin: 0 2px; padding: 2px 8px 2px 5px; border: 1px solid var(--border); border-radius: 999px; background: var(--soft); color: var(--text); font-size: 0.88em; line-height: 1.25; white-space: nowrap; text-decoration: none; vertical-align: -5px; }
 .content a[data-citation]:hover { background: color-mix(in srgb, var(--soft) 82%, var(--text) 18%); }
 .content a[data-citation] img { width: 16px; height: 16px; max-width: 16px; max-height: 16px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }