Original fictional briefing: actual one-slide and three-slide native conversion with readable source comparison

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Markdown slide boundaries</title><style>*{box-sizing:border-box}body{margin:0;background:#f5f1e8;color:#242c36;font:17px/1.6 system-ui}main{max-width:960px;margin:auto;padding:28px 20px}h1{font-size:clamp(27px,5vw,42px);line-height:1.15}button{font:inherit;background:#273b59;color:white;border:2px solid #273b59;border-radius:5px;padding:9px 13px;margin:0 8px 10px 0}button[aria-pressed=true]{background:#fff;color:#273b59}button:focus-visible{outline:3px solid #b15f22;outline-offset:3px}.result{font-size:24px;font-weight:700}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#fff;padding:18px;border-left:5px solid #b15f22;font-size:16px}section{border-top:1px solid #bbb;padding:16px 0}li{margin-bottom:6px}.note{background:#e6e9ee;padding:15px}</style></head><body><main><p>Source → actual HTML conversion</p><h1>Three headings need two slide breaks</h1><p>Original fictional reading-table briefing. The counts below come from real Marp CLI 4.5.1 HTML exports; this reading view does not run the converter.</p><div><button type="button" id="broken" aria-pressed="false">Without slide breaks</button><button type="button" id="correct" aria-pressed="true">With two slide breaks</button></div><p class="result" id="count" aria-live="polite">3 rendered slides</p><p id="explain">Two separators split the three headings into three slides.</p><h2>Editable Markdown</h2><pre id="source"># Reading table

Fictional preparation example.

---

# Materials

- Six booklets
- Two trays

---

# Arrangement

Place three booklets in each tray.
</pre><h2>Actual rendered grouping</h2><div id="slides"><section><h3>1 · Reading table</h3><p>Fictional preparation example.</p></section><section><h3>2 · Materials</h3><ul><li>Six booklets</li><li>Two trays</li></ul></section><section><h3>3 · Arrangement</h3><p>Place three booklets in each tray.</p></section></div><p class="note">6 booklets ÷ 2 trays = <strong id="per-tray">3</strong> booklets per tray. This is invented content, not a capacity or purchasing claim.</p><p>Download both original Markdown files and actual native HTML outputs beside the article. Native fixed-canvas slides may become small on a phone. This reflowing comparison is a separate reading aid; it does not demonstrate presenter controls, PDF/PPTX export or an offline guarantee.</p></main><script>const good="# Reading table\n\nFictional preparation example.\n\n---\n\n# Materials\n\n- Six booklets\n- Two trays\n\n---\n\n# Arrangement\n\nPlace three booklets in each tray.\n",bad="# Reading table\n\nFictional preparation example.\n\n\n# Materials\n\n- Six booklets\n- Two trays\n\n\n# Arrangement\n\nPlace three booklets in each tray.\n",initial=document.getElementById("slides").innerHTML;function show(ok){document.getElementById("source").textContent=ok?good:bad;document.getElementById("count").textContent=ok?"3 rendered slides":"1 rendered slide";document.getElementById("explain").textContent=ok?"Two separators split the three headings into three slides.":"All three headings remain together on one rendered slide.";document.getElementById("slides").innerHTML=ok?initial:"<section><h3>1 · Reading table / Materials / Arrangement</h3><p>Fictional preparation example.</p><ul><li>Six booklets</li><li>Two trays</li></ul><p>Place three booklets in each tray.</p></section>";document.getElementById("broken").setAttribute("aria-pressed",String(!ok));document.getElementById("correct").setAttribute("aria-pressed",String(ok));}document.getElementById("broken").addEventListener("click",()=>show(false));document.getElementById("correct").addEventListener("click",()=>show(true));</script></body></html>