How to build engineering talk slides from markdown
- Step 1Outline the talk in Markdown — Write each idea under a
##heading. Put runnable snippets in triple-backtick fences with a language hint for readability in source. - Step 2Break between slides with `---` — Add a line of only
---where one slide ends and the next begins. Headings alone will not split — separators do. - Step 3Stack a build-up with `----` — For a problem-then-solution reveal, separate the steps with
----so they appear as a vertical group the audience steps through. - Step 4Load the single Markdown file — Paste the text or drop one
.mdfile. This tool converts one file at a time. - Step 5Check code in the live preview — The iframe preview shows the real deck. Verify long code lines do not overflow the slide at projector aspect ratio; tighten them in source if they do.
- Step 6Download and rehearse — Save the
-slides.htmlfile, open it in your presentation browser, and run through it with arrow keys and the Esc overview before stage time.
What renders on a code slide
GFM features the engine supports vs. presentation features the deck does not add.
| Feature | Supported? | Notes |
|---|---|---|
| Fenced code blocks | Yes | Rendered as <pre><code>, whitespace preserved |
| Syntax highlighting | No | Plain monospaced text — no highlight.js in the deck |
| GFM pipe tables | Yes | Good for benchmark numbers |
| Task lists / strikethrough | Yes | GFM defaults are on |
| LaTeX / math | No | No KaTeX or MathJax loaded |
| Speaker notes | No | No Note: transform exists |
Slide structure controls
The two markers that build your deck.
| You write | Tool produces | Use it for |
|---|---|---|
A line of --- | New horizontal <section> | Moving to the next topic |
A line of ---- | Nested vertical <section> | A drill-down or progressive reveal |
## Title + bullets | <h2> and <ul> on one slide | The body of a single slide |
Markdown-family tier limits
A character limit applies in addition to the byte limit.
| Tier | Max file size | Max characters | Files per run |
|---|---|---|---|
| Free | 1 MB | 500,000 | 1 |
| Pro | 10 MB | 5,000,000 | 10* |
| Pro + Media | 50 MB | 20,000,000 | 50* |
| Developer | 500 MB | Unlimited | Unlimited* |
Cookbook
Five patterns for code-driven talks. Each shows the Markdown an engineer would actually write and what it produces. Keep code lines short — there is no horizontal scroll on a slide.
Title slide then a problem slide
Two horizontal slides. The --- is the only thing creating the break.
# Zero-downtime migrations @yourhandle · KubeCon --- ## Why it's hard - Schema changes lock tables - Old and new code run at once
A live-coding style code slide
Fenced block renders verbatim. No color, so rely on whitespace and short lines.
## The expand step
```go
func Migrate(db *sql.DB) error {
_, err := db.Exec(`ALTER TABLE users ADD COLUMN email_v2 text`)
return err
}
```Problem then fix as a vertical stack
---- keeps the contrast on one logical slide the audience steps through.
## The bug ```js await Promise.all(items.map(save)) // floods the DB ``` ---- ## The fix ```js for (const i of items) await save(i) ```
A benchmark table slide
GFM table renders directly — no screenshot needed.
## Throughput | Approach | req/s | p99 | |------------|-------|-------| | Sync loop | 1,200 | 90ms | | Batched | 4,800 | 110ms |
Closing slide with links
Autolinks and Markdown links render; the deck's hash routing makes each slide linkable.
## Resources - Repo: github.com/me/talk - [Full write-up](https://example.com/post) Thanks!
Edge cases and what actually happens
Code line too wide for the slide
CautionReveal does not wrap <pre> content; long lines run off the slide edge. Break the line in source or shorten the sample before converting.
No syntax highlighting
ExpectedThe deck renders code as plain monospaced text. If your talk depends on colored keywords, add highlight.js to the downloaded HTML yourself — the tool will not do it.
Heading didn't make a new slide
By designEach ## is a title inside the current slide, not a new slide. Add a --- line where you want the break.
Backtick fence with `---` inside
PreservedA --- inside a fenced code block is part of the code; the splitter only matches --- on its own line outside obvious content. Keep separators on their own line at the document level to be safe.
Presenting without network
CautionReveal.js loads from cdnjs. On a venue with no Wi-Fi the deck renders unstyled. Test on the real network or self-host the assets in the HTML.
Speaker notes not generated
Not supportedThere is no notes feature in this tool. Text you write appears on the slide. Add <aside class="notes"> to the HTML by hand if you need presenter view.
Front matter at the top
CautionA leading ---/--- YAML block is read as separators and creates stray slides. Strip front matter before converting.
Character limit hit before byte limit
413 rejectedA dense code-only file can exceed 500,000 characters on Free while still under 1 MB. The character cap is enforced separately — upgrade or split.
Two files selected
IgnoredOnly one file is converted per run. Merge multiple sources with md-merger first.
Frequently asked questions
How do I split slides?
Use a line of only --- for horizontal slides and a line of only ---- for vertical sub-slides. Headings do not split — only those markers do.
Will my code be syntax-highlighted?
No. Fenced code renders as plain monospaced text. The generated deck does not include highlight.js. You can add it to the HTML after downloading.
Do code blocks keep their indentation?
Yes. Fenced blocks render as <pre><code>, preserving whitespace exactly. Watch line width, though — long lines overflow the slide.
Can I show benchmark tables?
Yes. GitHub-Flavored Markdown pipe tables are supported by the engine and render on the slide.
Are speaker notes supported?
No. There is no Note: conversion. Any text stays on the slide. Add <aside class="notes"> manually for Reveal's presenter view.
Does it work offline at a venue?
Not by default. Reveal.js assets load from cdnjs, so you need network access. Test on the venue network or self-host the assets in the downloaded file.
What theme is used?
The built-in Reveal.js black theme. There is no picker; swap the theme stylesheet link in the HTML if you want another.
Can I render architecture diagrams?
Only as images you link or inline SVG/HTML the engine passes through. There is no Mermaid or diagram renderer built into the deck.
How large can my talk file be?
Free: 1 MB and 500,000 characters. Pro: 10 MB / 5,000,000. Pro + Media: 50 MB / 20,000,000. Developer: 500 MB with no character cap.
Can I convert several talks together?
No — one file per run. Combine them first with md-merger, then convert.
What if I want a plain HTML page instead of slides?
Use md-to-html for a styled page or md-to-github-html for GitHub-style output. Both take the same Markdown.
How do I make a printable handout?
Convert the same Markdown with md-to-pdf-modern for a clean PDF-ready page, useful as leave-behind material for attendees.
Privacy first
All Markdown processing runs locally in your browser using JavaScript. No file is ever uploaded to JAD Apps servers — only metadata counters are saved for signed-in dashboard stats.