four up

web/dist/markdown.js

@@ -12,6 +12,7 @@ const bullet = /^(\s*)[-*+]\s+(.*)$/;
 const ordered = /^(\s*)(\d+)[.)]\s+(.*)$/;
 const quote = /^\s*>\s?(.*)$/;
 const rule = /^\s*([-*_])(\s*\1){2,}\s*$/;
+const imageOnly = /^\s*!\[[^\]]*\]\((<[^>]*>|[^)]*)\)\s*$/;
 const tableSep = /^\s*\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?\s*$/;
 export function markdown(src, className = "md", opts = {}) {
     return h("div", { class: className }, ...blocks(src.replace(/\r\n?/g, "\n").split("\n"), opts));
@@ -165,6 +166,7 @@ function parseList(lines, start, opts) {
         }
     }
     let i = start;
+    let imageChoices = !isOrdered && !!opts.choice;
     while (i < lines.length) {
         const line = lines[i];
         const m = isOrdered ? ordered.exec(line) : bullet.exec(line);
@@ -191,11 +193,16 @@ function parseList(lines, start, opts) {
             body.push(indentOf(next) > base ? next.slice(Math.min(indentOf(next), base + 2)) : next.trim());
             i++;
         }
+        const detail = body.slice(1).filter((l) => l.trim() !== "");
+        imageChoices &&= choiceMarker.test(text) && detail.length === 1 && imageOnly.test(detail[0]);
         list.append(item(body, isOrdered ? { taskId: opts.taskId } : opts));
         while (i < lines.length && lines[i].trim() === "" && lines[i + 1] !== undefined && indentOf(lines[i + 1]) === base && (isOrdered ? ordered : bullet).test(lines[i + 1])) {
             i++;
         }
     }
+    if (imageChoices) {
+        list.className = "choice-grid";
+    }
     return [list, i];
 }
 function item(body, opts) {

web/src/markdown.ts

@@ -19,7 +19,8 @@ const bullet = /^(\s*)[-*+]\s+(.*)$/;
 const ordered = /^(\s*)(\d+)[.)]\s+(.*)$/;
 const quote = /^\s*>\s?(.*)$/;
 const rule = /^\s*([-*_])(\s*\1){2,}\s*$/;
-const tableSep = /^\s*\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?\s*$/;
+const imageOnly = /^\s*!\[[^\]]*\]\((<[^>]*>|[^)]*)\)\s*$/;
+const tableSep =/^\s*\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?\s*$/;
 
 export function markdown(src: string, className = "md", opts: Options = {}): HTMLElement {
   return h("div", { class: className }, ...blocks(src.replace(/\r\n?/g, "\n").split("\n"), opts));
@@ -194,6 +195,7 @@ function parseList(lines: string[], start: number, opts: Options): [HTMLElement,
   }
 
   let i = start;
+  let imageChoices = !isOrdered && !!opts.choice;
   while (i < lines.length) {
     const line = lines[i]!;
     const m = isOrdered ? ordered.exec(line) : bullet.exec(line);
@@ -220,11 +222,16 @@ function parseList(lines: string[], start: number, opts: Options): [HTMLElement,
       body.push(indentOf(next) > base ? next.slice(Math.min(indentOf(next), base + 2)) : next.trim());
       i++;
     }
+    const detail = body.slice(1).filter((l) => l.trim() !== "");
+    imageChoices &&= choiceMarker.test(text) && detail.length === 1 && imageOnly.test(detail[0]!);
     list.append(item(body, isOrdered ? { taskId: opts.taskId } : opts));
     while (i < lines.length && lines[i]!.trim() === "" && lines[i + 1] !== undefined && indentOf(lines[i + 1]!) === base && (isOrdered ? ordered : bullet).test(lines[i + 1]!)) {
       i++;
     }
   }
+  if (imageChoices) {
+    list.className = "choice-grid";
+  }
   return [list, i];
 }
 

web/style.css

@@ -1674,6 +1674,35 @@ pre.file-text .line::before {
   margin-top: 8px;
 }
 
+.md.context {
+  container-type: inline-size;
+}
+
+.md ul.choice-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+  padding-left: 0;
+}
+
+@container (max-width: 480px) {
+  .md ul.choice-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.md ul.choice-grid > li.choice {
+  margin-top: 0;
+}
+
+.choice-grid .choice-box {
+  height: 100%;
+}
+
+.choice-grid .md-img img {
+  margin: 0 auto;
+}
+
 .choice-box,
 .pick.choice-box {
   display: block;