Interactive markdown slide presentation with live editing and minimap view
npm install markdown-slides-cli> A powerful, interactive markdown slide presentation tool with live editing, minimap view, and fullscreen and stdin support. Create beautiful presentations from simple markdown files!
- š Markdown-Based - Write slides in simple markdown syntax
- šÆ Flexible Input - Load from files or stdin (pipe support)
- šŗļø Minimap View - Navigate slides with thumbnail overview
- āļø Live Editor - Built-in Monaco editor (VS Code's editor)
- šØ Beautiful Rendering - Full markdown support with syntax highlighting
- š± Responsive Design - Works on desktop, tablet, and mobile
- š¬ Fullscreen Mode - Present without distractions
- āØļø Keyboard Navigation - Navigate with arrow keys and shortcuts
- š¾ Export Edited Slides - Download your modified presentations
- š Dark Theme - Easy on the eyes during presentations
- š Zero Config - Works out of the box
- !md-slides-1)
- !md-slides-2)
- !md-slides-3)
``bash`
npm install -g markdown-slides-cli
After global installation, you can use it anywhere:
`bash`
markdown-slides -f presentation.mdor the shorter alias
md-slides -f presentation.md
Create a file called slides.md:
`markdownWelcome to My Presentation
This is the first slide
---
---
javascript
function hello() {
console.log('Hello World!');
}
`
`$3
From a file:
`bash
node markdown-slides.js -f slides.md
`Or with global installation:
`bash
markdown-slides -f slides.md
`From stdin (pipe):
`bash
Pipe from a file
cat slides.md | markdown-slidesPipe from echo
echo "# Slide 1\n---\n# Slide 2" | markdown-slidesUsing heredoc
markdown-slides << EOF
Welcome
This is my presentation
---
Second Slide
More content here
EOFCombine with other commands
curl https://raw.githubusercontent.com/user/repo/main/slides.md | markdown-slides
`Your browser will automatically open with your presentation!
š® CLI Options
| Option | Alias | Description | Default |
|--------|-------|-------------|---------|
|
--file | -f | Markdown file path (optional if using stdin) | - |
| --port | -p | Server port | 3457 |
| --title | -t | Presentation title | Markdown Slides |
| --theme | - | Slide theme (dark/light/blue) | dark |
| --help | -h | Display help | - |$3
File-based:
`bash
Basic usage
markdown-slides -f presentation.mdCustom port and title
markdown-slides -f slides.md -p 8080 -t "My Presentation"Different theme
markdown-slides -f deck.md --theme blue
`Stdin-based:
`bash
From pipe
cat slides.md | markdown-slidesWith options
cat slides.md | markdown-slides -p 8080 -t "My Talk"From command output
generate-slides.sh | markdown-slidesFrom URL
curl https://example.com/slides.md | markdown-slides
`āØļø Keyboard Shortcuts
| Key | Action |
|-----|--------|
|
ā or Space | Next slide |
| ā | Previous slide |
| Home | Go to first slide |
| End | Go to last slide |
| F or F11 | Toggle fullscreen |
| E | Open editor |
| M | Toggle minimap |
| Esc | Close editor / Exit fullscreen |š Markdown Syntax
$3
Slides are separated by horizontal rules or top-level headers:
Method 1: Horizontal Rules
`markdown
Slide 1
Content here---
Slide 2
More content*
Slide 3
Even more content
`Method 2: Top-Level Headers
`markdown
Slide 1
ContentSlide 2
ContentSlide 3
Content
`$3
- Headers:
# H1 through ###### H6
- Bold: bold or __bold__
- Italic: italic or _italic_
- Lists: Ordered and unordered
- Code Blocks: With syntax highlighting
- Inline Code: code
- Links: text
- Images: !alt
- Blockquotes: > quote
- Tables: Standard markdown tables
- Horizontal Rules: --- or *$3
`markdown
My Awesome Slide š
Key Points
- Important: This is bold
- Emphasis: This is italic
-
code: Inline code exampleCode Example
`javascript
const greeting = "Hello World!";
console.log(greeting);
`> "This is a blockquote"
| Feature | Status |
|---------|--------|
| Edit | ā
|
| View | ā
|
`šØ Using the Editor
$3
1. Click the "Edit" button in the header
2. Or press
E on your keyboard$3
- The Monaco editor provides full VS Code-like experience
- Syntax highlighting for markdown
- Built-in minimap for long documents
- Auto-completion and formatting
$3
1. Make your edits in the Monaco editor
2. Click "Apply" to update the presentation
3. Or click "Close" to discard changes
$3
Click the "Download" button in the editor to save your modified markdown file.
šŗļø Minimap Navigation
$3
1. Click the "Minimap" button in the header
2. Or press
M on your keyboard$3
- View thumbnails of all slides
- Current slide is highlighted
- Click any thumbnail to jump to that slide
- Minimap shows slide content preview
š¬ Fullscreen Presentation
$3
1. Click the "Fullscreen" button
2. Or press
F or F11$3
- Header automatically hides
- Navigation controls fade to semi-transparent
- Full immersive presentation experience
- Press
Esc or F11 to exitš Example Presentations
$3
`markdown
Introduction
Welcome to my talk!---
Problem Statement
What are we solving?
- Issue 1
- Issue 2
- Issue 3---
Solution
Here's how we fix it:
1. Step one
2. Step two
3. Step three---
Conclusion
Thank you! š
`$3
`markdown
API Documentation
---
REST Endpoints
GET /users
Retrieve all users`json
{
"users": [
{"id": 1, "name": "Alice"}
]
}
`---
Authentication
Use Bearer tokens:
`bash
curl -H "Authorization: Bearer TOKEN" /api/users
`---
Technologies Used
- Node.js - Runtime environment
- Commander - CLI argument parsing
- Marked - Markdown parsing
- Monaco Editor - Code editor (VS Code)
- Tailwind CSS - Styling
š¤ Use Cases
- š Educational Content - Teaching materials, tutorials
- š¼ Business Presentations - Pitch decks, reports
- š¤ Conference Talks - Technical presentations
- š Documentation - Product demos, guides
- šØāš« Training Materials - Workshops, courses
- š Data Presentations - Reports with code examples
- š Dynamic Content - Generate slides from scripts and pipe to viewer
- š Remote Content - Fetch and present markdown from URLs
š” Tips & Tricks
$3
1. Keep It Simple - One main idea per slide
2. Use Visual Hierarchy - Headers, lists, emphasis
3. Add Code Examples - With syntax highlighting
4. Include Emojis - Make slides more engaging š
5. Use Tables - For structured data
6. Add Images - Break up text-heavy slides
$3
1. Test Before Presenting - Preview all slides
2. Use Fullscreen - Minimize distractions
3. Practice Navigation - Learn keyboard shortcuts
4. Prepare Backup - Download PDF version
5. Have Notes Ready - Use separate notes file
$3
Stdin Input: Pipe markdown directly without creating files
`bash
cat slides.md | markdown-slides -p 3000
`Dynamic Generation: Combine with other tools
`bash
Generate slides from a script
./generate-report.sh | markdown-slidesFetch from URL
curl https://example.com/slides.md | markdown-slidesUse with heredoc for quick presentations
markdown-slides << 'EOF'
Quick Demo
This is a quick presentation
---
Thank You!
EOF
`Custom Styling: Edit the embedded CSS in
markdown-slides.jsCustom Themes: Modify the color scheme in the