Question formatting

web/src/markdown.ts

@@ -51,7 +51,16 @@ function blocks(lines: string[], opts: Options): Block[] {
         i++;
       }
       i++;
-      out.push(f[2]!.toLowerCase() === "mermaid" ? diagram(body.join("\n")) : copyable(h("pre", { class: "md-code" }, h("code", {}, body.join("\n")))));
+      const lang = f[2]!.toLowerCase();
+      if (lang === "mermaid") {
+        out.push(diagram(body.join("\n")));
+        continue;
+      }
+      if (lang === "diff" || lang === "patch") {
+        out.push(copyable(h("pre", { class: "md-code diff" }, h("code", {}, ...body.map(diffLine)))));
+        continue;
+      }
+      out.push(copyable(h("pre", { class: "md-code" }, h("code", {}, body.join("\n")))));
       continue;
     }
 
@@ -137,6 +146,11 @@ function blocks(lines: string[], opts: Options): Block[] {
   return out;
 }
 
+function diffLine(l: string): HTMLElement {
+  const cls = l.startsWith("@@") ? "hunk" : l.startsWith("+++") || l.startsWith("---") ? "meta" : l.startsWith("+") ? "add" : l.startsWith("-") ? "del" : "ctx";
+  return h("span", { class: `line ${cls}` }, l + "\n");
+}
+
 function startsBlock(lines: string[], i: number): boolean {
   const line = lines[i]!;
   return (
@@ -218,17 +232,18 @@ function item(body: string[], opts: Options): HTMLElement {
   const li = h("li");
   const m = opts.choice && choiceMarker.exec(body[0]!);
   const picker = m ? opts.choice!(m[2]!) : null;
+  const detail = h("div", { class: "choice-detail" });
   if (picker) {
     li.className = "choice";
     li.append(picker);
+    if (body.slice(1).some((l) => l.trim() !== "")) {
+      picker.append(detail);
+    }
   }
-  const target = picker ?? li;
+  const target = picker ? detail : li;
   const first = picker ? [] : [body[0]!];
   const rest = body.slice(1);
   if (rest.every((l) => !startsBlockLine(l)) && !rest.includes("")) {
-    if (picker && rest.length > 0) {
-      target.append(h("br"));
-    }
     target.append(...joinLines([...first, ...rest].map((l) => l.trim()), opts));
     return li;
   }
@@ -238,9 +253,6 @@ function item(body: string[], opts: Options): HTMLElement {
     head.push(body[k]!.trim());
     k++;
   }
-  if (picker && head.length > 0) {
-    target.append(h("br"));
-  }
   target.append(...joinLines(head, opts), ...blocks(body.slice(k), opts));
   return li;
 }