📊 Markdown Slides

> A powerful, interactive markdown slide presentation tool with live editing, minimap view, and fullscreen and stdin support. Create beautiful presentations from simple markdown files!

!Node.js
!License

✨ Features

- 📝 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

Screenshots

- !md-slides-1)
- !md-slides-2)
- !md-slides-3)

📦 Installation

$3

``bash
npm install -g markdown-slides-cli
`

After global installation, you can use it anywhere:

`bash
markdown-slides -f presentation.md


or the shorter alias


md-slides -f presentation.md
`

🚀 Quick Start

$3

Create a file called slides.md:

`markdown


Welcome to My Presentation

This is the first slide

---

Second Slide

- Point 1
- Point 2
- Point 3

---

Code Example

`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-slides

Pipe from echo

echo "# Slide 1\n---\n# Slide 2" | markdown-slides

Using heredoc

markdown-slides << EOF

Welcome

This is my presentation
---

Second Slide

More content here
EOF

Combine 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.md

Custom 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-slides

With options

cat slides.md | markdown-slides -p 8080 -t "My Talk"

From command output

generate-slides.sh | markdown-slides

From 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

Content

Slide 2

Content

Slide 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 example

Code 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-slides

Fetch from URL

curl https://example.com/slides.md | markdown-slides

Use 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.js

Custom Themes: Modify the color scheme in the