Marp — Markdown Presentation Ecosystem

Create slide decks from plain Markdown. Export to HTML, PDF, PPTX, or images via CLI.

Quick Start

# Verify installed
marp --version

# Convert to HTML (default)
marp slides.md -o slides.html

# Convert to PDF (requires Chrome/Edge installed)
marp slides.md --pdf -o slides.pdf

# Convert to PowerPoint
marp slides.md --pptx -o slides.pptx

# Convert to PNG (one image per slide)
marp slides.md --images png

# Watch mode (auto-rebuild on save)
marp -w slides.md

# Serve with live preview
marp -s ./slides-dir

Slide Syntax

Slides are separated by --- horizontal rulers. Front-matter sets global directives.

---
marp: true
theme: default
paginate: true
---

# Title Slide

Subtitle text here

---

## Second Slide

- Bullet points
- Work normally
- Standard **markdown**

---

## Third Slide

Code blocks, tables, images — all standard markdown.

Key rule: marp: true in front-matter is required for Marp CLI to process the file.

Directives Reference

Global (whole deck)

| Directive | Values | Purpose | |-----------|--------|---------| | theme | default, gaia, uncover | Built-in themes | | paginate | true/false | Page numbers | | size | 16:9 (default), 4:3 | Slide aspect ratio | | style | CSS string | Custom styles for whole deck | | headingDivider | 1-6 or array | Auto-split slides at headings |

Local (per slide, in HTML comments)

<!-- backgroundColor: #1a1a2e -->
<!-- color: white -->
<!-- class: lead -->
<!-- _class: invert -->   ← underscore prefix = this slide only (spot directive)
<!-- header: Flash Product Spec -->
<!-- footer: Confidential -->

| Directive | Purpose | |-----------|---------| | backgroundColor | Slide background color | | backgroundImage | Background image URL | | color | Text color | | class | CSS class (persists to following slides) | | _class | CSS class (this slide only) | | header | Header text | | footer | Footer text | | paginate | true/false/hold/skip |

Built-in Themes

default

GitHub markdown style, content vertically centered. Clean for technical docs.

gaia

Classic Marp look. Supports lead class (centered) and gaia class (alternate colors).

<!-- _class: lead -->      ← centered title layout
<!-- _class: gaia -->       ← alternate color scheme
<!-- _class: lead invert --> ← dark centered

uncover

Always centered, minimal. Good for talks.

Common to all themes

<!-- class: invert -->  ← dark mode variant
<!-- size: 4:3 -->      ← traditional aspect ratio (default is 16:9)

Image Syntax (Extended)

Marp extends standard markdown image syntax with keywords in alt text.

Inline images

![w:200](image.png)              <!-- width 200px -->
![h:150](image.png)              <!-- height 150px -->
![w:200 h:150](image.png)       <!-- both -->
![blur:3px](image.png)           <!-- CSS filter -->
![grayscale](image.png)          <!-- grayscale filter -->

Background images

![bg](image.png)                 <!-- full slide background -->
![bg contain](image.png)        <!-- fit inside slide -->
![bg cover](image.png)          <!-- cover entire slide -->
![bg fit](image.png)            <!-- alias for contain -->
![bg 50%](image.png)            <!-- 50% size -->
![bg right](image.png)          <!-- split: image right, content left -->
![bg left:40%](image.png)       <!-- split: image left 40%, content right -->

Multiple backgrounds

![bg](image1.png)
![bg](image2.png)
![bg](image3.png)
<!-- Shows side-by-side -->

Split backgrounds (content + image)

![bg right:60%](diagram.png)

## Architecture

- Component A talks to B
- B stores in database
- C reads from cache

<!-- Image takes 60% right, text takes 40% left -->

Custom CSS

Inline in front-matter

---
marp: true
theme: default
style: |
  section {
    font-family: 'Inter', sans-serif;
  }
  section.brand {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
  }
  h1 { color: #2d3748; }
  img[alt~="center"] {
    display: block;
    margin: 0 auto;
  }
---

Using custom classes

<!-- _class: brand -->

# Branded Slide

This slide uses the custom `brand` class defined in the style block.

Custom theme file

# Create theme CSS file, then use with --theme flag
marp slides.md --theme ./custom-theme.css --pdf

Diagrams in Slides

Marp doesn't natively render Mermaid. Two approaches:

Approach 1: Pre-render to SVG (recommended)

# Install mermaid CLI
npm install -g @mermaid-js/mermaid-cli

# Render .mmd files to SVG
mmdc -i diagram.mmd -o diagram.svg

# Reference in slides
# ![bg right:50%](diagram.svg)

Approach 2: HTML embed with mermaid.js

---
marp: true
---

<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>

<div class="mermaid">
graph LR
    A[User] --> B[Flash App]
    B --> C[API]
    C --> D[Database]
</div>

Note: HTML embed only works in HTML output, not PDF/PPTX. Use pre-rendered SVGs for PDF export.

Presenter Notes

Add notes below --- comment blocks — visible in presenter view, hidden in slides.

## Slide Title

Content here

<!-- This is a presenter note. Won't appear on slide. -->
<!-- Use marp -s to serve and press P for presenter view. -->

CLI Reference

# Basic conversion
marp input.md                     # → input.html
marp input.md -o output.pdf       # → PDF
marp input.md --pptx              # → PPTX
marp input.md --images png        # → PNG per slide

# Options
marp --pdf --allow-local-files slides.md   # Allow local image paths in PDF
marp --html slides.md                       # Enable HTML tags in markdown
marp --theme ./theme.css slides.md          # Custom theme
marp --title "My Deck" slides.md            # Set HTML title

# Batch conversion
marp ./slides-dir/                 # Convert all .md in directory

# Server + watch
marp -s ./slides-dir              # HTTP server with live reload
marp -w slides.md                 # Watch and rebuild on change

# Configuration file (marp.config.mjs)
# Place in project root — auto-detected by CLI

marp.config.mjs example

export default {
  allowLocalFiles: true,
  html: true,
  themeSet: './themes',
  output: './output',
};

Patterns for Product Docs

Requirement doc template

---
marp: true
theme: default
paginate: true
header: "Flash — Product Spec"
footer: "Confidential"
style: |
  section { font-size: 24px; }
  section.cover { text-align: center; }
  section.cover h1 { font-size: 48px; }
---

<!-- _class: cover -->

# Feature: Cashu Flashcards

**Version:** 1.0 · **Date:** 2026-03-19 · **Author:** Product Team

---

## Overview

Brief description of what this feature does and why.

---

## User Flow

![bg right:55% contain](./diagrams/user-flow.svg)

1. User opens Flashcard tab
2. Selects amount
3. Confirms creation
4. Receives Cashu token

---

## Architecture

![bg contain](./diagrams/architecture.svg)

---

## Requirements

| ID | Requirement | Priority |
|----|-------------|----------|
| R1 | Create flashcard from USD wallet | P0 |
| R2 | Redeem flashcard to any Flash user | P0 |
| R3 | Expire after 30 days | P1 |

---

## Open Questions

- [ ] Max flashcard value?
- [ ] Offline redemption support?

Common Mistakes

| Mistake | Fix | |---------|-----| | Forgot marp: true | Add to front-matter — CLI ignores file without it | | PDF export fails | Needs Chrome/Chromium/Edge installed. Use --allow-local-files for local images | | Mermaid not rendering | Pre-render to SVG with mmdc, embed as image | | Background image not showing | Use ![bg](path) — the bg keyword is required | | Styles not applying | Check CSS selector — slides are <section> elements | | Directives not working | Must be in HTML comment  or front-matter | | Split background wrong side | ![bg right](img) = image right; ![bg left](img) = image left |

Marp — Markdown Presentations