Markdown Slides
Convert markdown into standalone HTML slide decks — zero dependencies, works offline.
Use when creating presentations from markdown, quick slide decks, or demo presentations.
Requirements
- No external tools, build steps, or API keys
- Output: single HTML file, works in any browser
Instructions
Parse input — Split markdown content on --- (horizontal rule) to create individual slides.
Convert markdown to HTML for each slide:
# heading → <h1> (title slides)## heading → <h2> (section headers)- item → <ul><li> (bullet lists)**bold** → <strong>, *italic* → <em>`code` → <code>, code blocks → <pre><code> → <img>- Paragraphs →
<p>
Wrap in HTML template with embedded CSS and JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PRESENTATION_TITLE</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #1a1a2e; color: #eee; }
.slide { width: 100vw; height: 100vh; display: none; flex-direction: column; justify-content: center; align-items: center; padding: 8vh 10vw; text-align: center; }
.slide.active { display: flex; }
.slide h1 { font-size: 3.5rem; margin-bottom: 1rem; background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.slide h2 { font-size: 2.5rem; margin-bottom: 1rem; color: #667eea; }
.slide p { font-size: 1.5rem; line-height: 1.8; max-width: 800px; color: #ccc; }
.slide ul, .slide ol { font-size: 1.4rem; text-align: left; line-height: 2; }
.slide code { background: #16213e; padding: 2px 8px; border-radius: 4px; font-size: 1.2rem; }
.slide pre { background: #16213e; padding: 1.5rem; border-radius: 8px; text-align: left; overflow-x: auto; max-width: 90%; }
.slide pre code { background: none; padding: 0; }
.slide img { max-width: 70%; max-height: 60vh; border-radius: 8px; }
.progress { position: fixed; bottom: 0; left: 0; height: 4px; background: #667eea; transition: width 0.3s; z-index: 10; }
.slide-num { position: fixed; bottom: 12px; right: 20px; font-size: 0.9rem; color: #555; }
</style>
</head>
<body>
<!-- SLIDES_HERE: <div class="slide">content</div> per slide -->
<div class="progress" id="progress"></div>
<div class="slide-num" id="slideNum"></div>
<script>
let current = 0;
const slides = document.querySelectorAll('.slide');
function show(n) {
current = Math.max(0, Math.min(n, slides.length - 1));
slides.forEach(s => s.classList.remove('active'));
slides[current].classList.add('active');
document.getElementById('progress').style.width = ((current + 1) / slides.length * 100) + '%';
document.getElementById('slideNum').textContent = (current + 1) + ' / ' + slides.length;
}
document.addEventListener('keydown', e => {
if (e.key === 'ArrowRight' || e.key === ' ') show(current + 1);
if (e.key === 'ArrowLeft') show(current - 1);
if (e.key === 'Home') show(0);
if (e.key === 'End') show(slides.length - 1);
});
document.addEventListener('click', e => {
if (e.clientX > window.innerWidth / 2) show(current + 1);
else show(current - 1);
});
show(0);
</script>
</body>
</html>
Save as slides.html (or user-specified path).
Tell the user: Open in browser, use ←/→ arrows or click to navigate, F11 for fullscreen.
Customization Options
| Option |
Default |
Alternatives |
| Theme |
Dark (#1a1a2e) |
Light (#fff), Solarized |
| Font |
System UI |
Monospace, Serif |
| Accent |
#667eea |
Any hex color |
| Ratio |
16:9 (viewport) |
Can add letterboxing |
Edge Cases
- No
--- separators: Treat each # heading as a slide break.
- Very long slides: Content may overflow. Suggest splitting into multiple slides.
- Images: Must be URLs or base64-encoded. Local file paths won't work in standalone HTML.
- Code-heavy slides: Reduce font size for
<pre> blocks on those slides.
- Speaker notes: Can add
<!-- notes: ... --> comments (hidden from view).
1---2name: markdown-slides3description: Convert markdown into self-contained HTML slide presentations with keyboard navigation.4---5
6
7# Markdown Slides
8
9Convert markdown into standalone HTML slide decks — zero dependencies, works offline.
10
11**Use when** creating presentations from markdown, quick slide decks, or demo presentations.
12
13## Requirements
14
15- No external tools, build steps, or API keys
16- Output: single HTML file, works in any browser
17
18## Instructions
19
201. **Parse input** — Split markdown content on `---` (horizontal rule) to create individual slides.
21
222. **Convert markdown to HTML** for each slide:
23 - `# heading` → `<h1>` (title slides)
24 - `## heading` → `<h2>` (section headers)
25 - `- item` → `<ul><li>` (bullet lists)
26 - `**bold**` → `<strong>`, `*italic*` → `<em>`
27 - `` `code` `` → `<code>`, code blocks → `<pre><code>`
28 - `` → `<img>`
29 - Paragraphs → `<p>`
30
313. **Wrap in HTML template** with embedded CSS and JavaScript:
32
33```html
34<!DOCTYPE html>
35<html>
36<head>
37<meta charset="utf-8">
38<meta name="viewport" content="width=device-width, initial-scale=1">
39<title>PRESENTATION_TITLE</title>
40<style>
41 * { margin: 0; padding: 0; box-sizing: border-box; }
42 body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #1a1a2e; color: #eee; }
43 .slide { width: 100vw; height: 100vh; display: none; flex-direction: column; justify-content: center; align-items: center; padding: 8vh 10vw; text-align: center; }
44 .slide.active { display: flex; }
45 .slide h1 { font-size: 3.5rem; margin-bottom: 1rem; background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
46 .slide h2 { font-size: 2.5rem; margin-bottom: 1rem; color: #667eea; }
47 .slide p { font-size: 1.5rem; line-height: 1.8; max-width: 800px; color: #ccc; }
48 .slide ul, .slide ol { font-size: 1.4rem; text-align: left; line-height: 2; }
49 .slide code { background: #16213e; padding: 2px 8px; border-radius: 4px; font-size: 1.2rem; }
50 .slide pre { background: #16213e; padding: 1.5rem; border-radius: 8px; text-align: left; overflow-x: auto; max-width: 90%; }
51 .slide pre code { background: none; padding: 0; }
52 .slide img { max-width: 70%; max-height: 60vh; border-radius: 8px; }
53 .progress { position: fixed; bottom: 0; left: 0; height: 4px; background: #667eea; transition: width 0.3s; z-index: 10; }
54 .slide-num { position: fixed; bottom: 12px; right: 20px; font-size: 0.9rem; color: #555; }
55</style>
56</head>
57<body>
58<!-- SLIDES_HERE: <div class="slide">content</div> per slide -->
59<div class="progress" id="progress"></div>
60<div class="slide-num" id="slideNum"></div>
61<script>
62let current = 0;
63const slides = document.querySelectorAll('.slide');
64function show(n) {
65 current = Math.max(0, Math.min(n, slides.length - 1));
66 slides.forEach(s => s.classList.remove('active'));
67 slides[current].classList.add('active');
68 document.getElementById('progress').style.width = ((current + 1) / slides.length * 100) + '%';
69 document.getElementById('slideNum').textContent = (current + 1) + ' / ' + slides.length;
70}
71document.addEventListener('keydown', e => {
72 if (e.key === 'ArrowRight' || e.key === ' ') show(current + 1);
73 if (e.key === 'ArrowLeft') show(current - 1);
74 if (e.key === 'Home') show(0);
75 if (e.key === 'End') show(slides.length - 1);
76});
77document.addEventListener('click', e => {
78 if (e.clientX > window.innerWidth / 2) show(current + 1);
79 else show(current - 1);
80});
81show(0);
82</script>
83</body>
84</html>
85```
86
874. **Save** as `slides.html` (or user-specified path).
88
895. **Tell the user**: Open in browser, use ←/→ arrows or click to navigate, F11 for fullscreen.
90
91## Customization Options
92
93| Option | Default | Alternatives |
94|--------|---------|-------------|
95| Theme | Dark (#1a1a2e) | Light (#fff), Solarized |
96| Font | System UI | Monospace, Serif |
97| Accent | #667eea | Any hex color |
98| Ratio | 16:9 (viewport) | Can add letterboxing |
99
100## Edge Cases
101
102- **No `---` separators**: Treat each `# heading` as a slide break.
103- **Very long slides**: Content may overflow. Suggest splitting into multiple slides.
104- **Images**: Must be URLs or base64-encoded. Local file paths won't work in standalone HTML.
105- **Code-heavy slides**: Reduce font size for `<pre>` blocks on those slides.
106- **Speaker notes**: Can add `<!-- notes: ... -->` comments (hidden from view).
modbender