A single-file HTML web app that turns a Markdown document into a keyboard-navigable slide presentation. Supports code syntax highlighting, speaker notes, slide overview grid, fullscreen mode, and a progress bar.
You are an assistant that generates a single-file HTML web application. Produce a file called slides.html that turns an embedded Markdown document into a presentation. The file must work by simply opening it in a modern browser — no server, no build step, no external dependencies that require network access at runtime (inline everything or use only built-in browser APIs).
The HTML file contains these sections in order:
<!DOCTYPE html> and <html lang="en"> with <meta charset="utf-8"> and viewport meta tag<style> block with all CSS<script type="text/markdown" id="source"> block containing the sample Markdown presentation<div id="app"> container for the rendered slides<script> block with all JavaScript: Markdown parser, slide engine, navigation, and keyboard handlersImplement a minimal Markdown-to-HTML parser (no external library) that handles:
# through #### → <h1> through <h4>**text**), italic (*text*), bold-italic (***text***)`code`) → <code>[text](url)) → <a>, images () → <img>- item or * item) with nesting (indent with 2+ spaces)1. item)> text) → <blockquote>```language ... ```) → <pre><code class="language-xxx">After rendering a fenced code block, apply a token-based colorizer using regex replacements. Support at minimum these languages:
Python: keywords (def, class, import, from, return, if, else, elif, for, while, in, not, and, or, True, False, None, with, as, try, except, raise, yield, lambda, pass), # comments, single/double/triple-quoted strings, numbers
JavaScript/TypeScript: keywords (function, const, let, var, return, if, else, for, while, class, import, export, from, async, await, new, this, true, false, null, undefined, typeof, instanceof), // and /* */ comments, single/double/template-literal strings, numbers
HTML: tags (<tag>), attribute names, attribute values (quoted strings), <!-- --> comments
Color scheme for code tokens:
#c792ea (purple)#c3e88d (green)#546e7a (gray, italic)#f78c6c (orange)#d4d4d4If the language hint is not recognized, render the code block without highlighting.
\n---\n (three dashes on a line by themselves, with newlines before and after)<div class="slide">??? separates slide content from speaker notes??? is the visible slide content??? is the speaker notes (parsed as Markdown too)S toggles a notes panel — a fixed-position drawer at the bottom (30% viewport height) with its own scrollbar, semi-transparent dark background??? block, show "No notes for this slide" in dim italic textEscape closes the notes panel if open| Key | Action |
|---|---|
| Right arrow, Down arrow, Spacebar | Next slide |
| Left arrow, Up arrow | Previous slide |
| Home | First slide |
| End | Last slide |
F | Toggle fullscreen (use document.documentElement.requestFullscreen()) |
O | Toggle overview grid |
S | Toggle speaker notes panel |
? | Toggle keyboard shortcuts help overlay |
| Escape | Close any open overlay (notes, overview, help) |
<a>) or button inside the slidelocation.hash to the 1-indexed slide number (e.g., #3)location.hash — if it contains a valid slide number, jump to that slidehashchange events so the browser back/forward buttons work for slide navigation3 / 10 formatWhen toggled with O:
transform: scale())auto-fill columns, minimum thumbnail width ~200pxEscape or O again closes the overview#7c4dff or #64ffda)(currentSlide / totalSlides) * 100% — so slide 1 of 10 is 10%, slide 10 of 10 is 100%transition: width 0.3s easeWhen toggled with ?:
Escape or clicking the backdrop#1a1a2e#e0e0e0#ffffff or an accent like #82aaff#80cbc4 with underline on hover-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif), 1.5 line height'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'Consolas', monospace#2d2d44, border-radius 8px, padding 20px, horizontal overflow scroll#2d2d44, padding 2px 6px, border-radius 4pxopacity: 1 and visibility: visiblemax-width: 100%, max-height: 60vh, centeredEmbed a sample presentation as the default Markdown with 6 slides:
h1 title ("Markdown Slide Deck"), an h3 subtitle ("Write slides in Markdown, present in the browser"), and a short paragraphh2 heading and a fenced Python code block demonstrating a real function (e.g., a Fibonacci generator or a simple HTTP server) — must be long enough to test syntax highlighting???, and speaker notes below it explaining that pressing S reveals notes