5/5 From Story to Stage: Creating Presentations with Marp
Previous: AGENTS.md: Teaching AI How You Work
Four posts ago, you wrote a fairy tale outline in Markdown. You opened it in VSCode. Copilot expanded it into a full story with Mermaid diagrams. AGENTS.md taught Copilot your style.
Now you have content. Time to present it.
The Pipeline
The whole series has been building toward this:
Everything is plain text. Everything is version-controlled. Everything stays in VSCode.
Marp in 60 Seconds
Marp turns Markdown into slides. A --- separator creates a new slide. That’s the core concept.
---
marp: true
theme: default
paginate: true
---
# Lady Binary and the Sorted Scrolls
### An Algorithm Fairy Tale
---
## The Kingdom
A vast library where every scroll is numbered and sorted.
A million scrolls. One librarian.
---
## The Challenge
Find scroll #42.
The apprentice starts from scroll #1.
Lady Binary starts from the middle.Three slides. No PowerPoint. No drag-and-drop. No fighting with alignment.
The Marp extension from Post 2 previews these slides live in VSCode. Edit the left pane, see the slides update on the right.
For the full Marp guide (themes, custom CSS, export options, advanced layouts), see Marp Presentations: Markdown Becomes Slides.
Hands-On: The Lady Binary Presentation
Create presentations/lady-binary.md in your project:
---
marp: true
theme: default
paginate: true
backgroundColor: #fffef5
style: |
section { font-family: 'Georgia', serif; }
h1, h2 { color: #5c4827; }
---
# Lady Binary and the Sorted Scrolls
### An Algorithm Fairy Tale
*"By halving one's search with each step, even a library
of a million scrolls can be searched in merely twenty peeks."*
---
## The Kingdom of Sorted Scrolls
A vast library stretches to the horizon.
Every scroll is numbered. Every scroll is in order.
The young apprentice searches from the beginning.
One scroll at a time. One after another.
Lady Binary has a different method.
---
## The Apprentice's Way
Search every scroll, starting from #1:
> Scroll 1... no. Scroll 2... no. Scroll 3... no...
To find scroll #42 among a million:
**Up to 1,000,000 checks.**
---
## Lady Binary's Way
Always start in the middle:
> Scroll 500,000 — too high. Ignore the upper half.
> Scroll 250,000 — too high. Ignore again.
> ...twenty steps later...
> Scroll 42. Found.
**Exactly 20 checks.** Because log2(1,000,000) ≈ 20.
---
## The Algorithm as a Journey
` ``mermaid
graph TD
A["Enter the library"] --> B["Open the middle scroll"]
B --> C{"Is this #42?"}
C -->|"Yes!"| D["Quest complete!"]
C -->|"Too high"| E["Ignore upper half"]
C -->|"Too low"| F["Ignore lower half"]
E --> G["Go to new middle"]
F --> G
G --> B
` ``
---
## The Moral
| Method | Scrolls checked |
|--------|----------------|
| The Apprentice (linear) | Up to 1,000,000 |
| Lady Binary (binary search) | At most 20 |
*Each peek removes half of what remains.
That is the power of the middle.*
---
## The End
**Lady Binary and the Sorted Scrolls**
An Algorithm Fairy Tale about Binary Search
*Next tale: The Bubble Kingdom (Bubble Sort)*Note: Mermaid in Marp requires marp-cli with
--htmlflag for rendering. In preview, the diagram shows as code.
Adding Speaker Notes
Marp supports HTML comments as speaker notes — visible in presenter mode, hidden on slides:
---
## Lady Binary's Way
Always start in the middle.
<!--
SPEAKER NOTES:
This is where the audience has the "aha" moment.
Pause after "twenty steps later" for effect.
Ask: "How many of you would have started from scroll #1?"
Timing: 2 minutes on this slide.
-->Your AGENTS.md from Post 4 already specifies this: “Speaker notes for every slide with timing and storytelling cues.” Copilot follows this rule when generating new slides.
Copilot as Slide Assistant
With the fairy tale content in tales/lady-binary.md and the AGENTS.md in your project root, ask Copilot:
Using #file:tales/lady-binary.md, create a Marp presentation for this fairy tale. Follow the slide guidelines in AGENTS.md. Include speaker notes with timing.
Copilot generates the full slide deck, following your five-part story structure, using the character archetypes, respecting the “max 6 bullet points per slide” rule — all from AGENTS.md.
You can also iterate on individual slides:
“Add a Mermaid diagram to slide 4 showing the search space halving”
“Rewrite the speaker notes for slide 2 — make them more conversational”
“Create a summary slide comparing all sorting fairy tales”
Export
From the terminal:
# Preview in browser
npx @marp-team/marp-cli --preview presentations/lady-binary.md
# Export to PDF
npx @marp-team/marp-cli presentations/lady-binary.md --pdf
# Export to PowerPoint (for those who need it)
npx @marp-team/marp-cli presentations/lady-binary.md --pptxOr use the Marp extension: right-click the file, “Marp: Export Slide Deck.”
The Full Picture
Your project is complete:
algorithm-fairy-tales/
├── AGENTS.md ← AI style guide (Post 4)
├── tales/
│ └── lady-binary.md ← full story (Posts 1-3)
├── presentations/
│ └── lady-binary.md ← slide deck (this post)
└── assets/One folder. Plain text files. Git history of every change. AI-assisted throughout. No PowerPoint. No Canva. No context switching between tools.
This same pipeline created the “GitHub Copilot Beyond Code” presentation that inspired this series — 40+ slides with speaker notes, Mermaid diagrams, and audience-specific content. All in one .md file. All version-controlled. All built in VSCode with Copilot.
The Series in One Paragraph
Markdown is how you talk to AI (Post 1). VSCode is where you work (Post 2). Copilot is your collaborator (Post 3). AGENTS.md is how you teach it your rules (Post 4). Marp is how you deliver (Post 5). Each tool is simple. Together, they replace a scattered workflow of chat interfaces, Word documents, PowerPoint decks, and copy-paste with one unified, AI-augmented, version-controlled pipeline.
Series overview: Stop Using VSCode as a Code Editor
Tool deep dives: