Create professional Markdown-based slide presentations with Marp. Covers themes, directives, speaker notes, presenter view, and export to PDF, HTML, and PPTX formats. Includes VS Code integration, CLI usage, and CI/CD automation.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
Create professional Markdown-based slide presentations with Marp. Covers themes, directives, speaker notes, presenter view, and export to PDF, HTML, and PPTX formats. Includes VS Code integration, CLI usage, and CI/CD automation.
version
1.0.0
category
documentation
type
skill
capabilities
["Markdown-based slide creation","Built-in and custom themes","Directives for slide control","Speaker notes and presenter view","Export to PDF, HTML, PPTX","VS Code extension integration","CLI for automation and CI/CD","Math equations with KaTeX","Mermaid diagrams"]
Create professional slide presentations using Markdown with Marp (Markdown Presentation Ecosystem). This skill covers everything from basic slides to advanced theming and multi-format export.
Need complex animations and transitions (use PowerPoint/Keynote)
Require real-time collaboration (use Google Slides)
Building interactive web applications (use reveal.js directly)
Need embedded videos with playback controls
Building documentation websites (use MkDocs or Docusaurus)
Prerequisites
Installation
# Using npm (recommended)
npm install -g @marp-team/marp-cli
# Using npx (no installation needed)
npx @marp-team/marp-cli --version
# Using Homebrew (macOS)
brew install marp-cli
# Using Docker
docker pull marpteam/marp-cli
# Verify installation
marp --version
VS Code Extension
# Install from VS Code marketplace# Search: "Marp for VS Code"# Extension ID: marp-team.marp-vscode
code --install-extension marp-team.marp-vscode
Core Capabilities
1. Basic Slide Creation
<!-- slides.md -->
---marp: true
---# Welcome to My Presentation
A subtitle for the first slide
---
## Slide 2: Key Points- First important point
- Second important point
- Third important point
---
## Slide 3: Code Example```python
def hello(name: str) -> str:
return f"Hello, {name}!"
Thank You!
Questions?
### 2. Frontmatter Configuration
```markdown
---
marp: true
title: Project Presentation
description: Quarterly review for Q4 2025
author: Your Name
theme: default
paginate: true
header: 'Company Name'
footer: 'Confidential - Internal Use Only'
size: 16:9
math: katex
style: |
section {
background-color: #fefefe;
}
---
# First Slide
Content here...
3. Themes and Styling
---
marp: true
theme: default
---
<!-- Available built-in themes: default, gaia, uncover -->
# Default Theme
Clean and professional
---
<!-- Switching themes mid-presentation -->
<!-- _theme: gaia -->
# Gaia Theme
Bold and colorful
---
<!-- Custom background color -->
<!-- _backgroundColor: #1e3a5f -->
<!-- _color: white -->
# Dark Background
With light text
---
marp: true
---
<!-- Local directive (applies to current slide only) -->
<!-- _class: lead -->
<!-- _backgroundColor: #2563eb -->
<!-- _color: white -->
# Title Slide
Subtitle here
---
<!-- _paginate: false -->
<!-- _header: '' -->
# Clean Slide
No pagination or headers
---
<!-- Scoped styling -->
<stylescoped>
h1 { color: #dc2626; }
ul li { font-size: 1.2em; }
</style>
# Scoped Styles
- Custom styling for this slide only
6. Speaker Notes
---
marp: true
---# Presentation Title
Overview of topics
<!--
Speaker notes go here.
Key points to mention:
1. Welcome the audience
2. Introduce yourself
3. Preview the agenda
Time: ~2 minutes
-->
---
## Code Example```python
def process_data(data):
return [x * 2 for x in data]
### 7. Images and Backgrounds
```markdown
---
marp: true
---
<!-- Full background image -->
# Full Background
Text over image
---
<!-- Background with opacity -->
# Semi-transparent Background
---
<!-- Split layout -->
# Split Layout
Image on the right side, content on the left
---
<!-- Background with gradient -->
)
# Gradient Background
---
<!-- Inline images with sizing -->
## Product Features
 
8. Math Equations
---
marp: true
math: katex
---# Mathematical Equations## Inline Math
The quadratic formula is $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$
---
## Block Math
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
$$
\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
$$
9. Mermaid Diagrams
---
marp: true
---# Diagrams## Flowchart```mermaid
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Process A]
B -->|No| D[Process B]
C --> E[End]
D --> E
Sequence Diagram
sequenceDiagram
participant U as User
participant S as Server
U->>S: Request data
S-->>U: Response
### 10. CLI Usage
```bash
# Convert to HTML
marp slides.md -o slides.html
# Convert to PDF
marp slides.md -o slides.pdf
# Convert to PPTX
marp slides.md -o slides.pptx
# Watch mode
marp -w slides.md -o slides.html
# Server mode with live preview
marp -s slides.md
# Use custom theme
marp slides.md --theme ./themes/custom.css -o slides.pdf
# Allow local file access
marp slides.md --allow-local-files -o slides.pdf
# PDF with speaker notes
marp slides.md -o slides.pdf --pdf-notes
---
marp: true
theme: corporate
paginate: true
header: 'Company | Title'
footer: '2026'
---
<!-- _class: title -->
<!-- _paginate: false -->
# Presentation Title**Presenter Name** | *Date*
---
# Agenda1. Topic One
2. Topic Two
3. Q&A
---
<!-- _class: section -->
# Section 1
---
## Content Slide
- Key point
- Another point
---
<!-- _class: title -->
# Thank You
Questions?
3. Image Guidelines
<!-- Use consistent sizing -->
<!-- Use relative paths -->
<!-- Include alt text -->
