Slidev Mastery

Slidev is a presentation framework for developers that uses markdown with Vue components. Create beautiful, interactive slides using familiar syntax with powerful features like live coding, diagrams, and animations.

Evidence-based design: This skill incorporates research-based best practices for accessible, effective presentations. See references/presentation-best-practices.md for full guidelines.

Core Concepts

Slide Separation

Separate slides with --- on its own line:

# First Slide

Content here

---

# Second Slide

More content

Importing Slides from External Files

You can split your presentation into multiple markdown files using the src frontmatter option. This allows for better organization and reusability:

# Normal slide

---
src: ./slides/introduction.md
---

---
# Another normal slide

---
src: ./slides/conclusion.md
---

Benefits of modular slide structure:

• Stable identity: Use meaningful filenames (e.g., microservices-benefits.md) instead of numbers
• Easy reordering: Move src includes in master file without renaming files
• Independent editing: Edit individual slide files separately
• Better collaboration: Team members can work on different slides simultaneously
• Version control: Meaningful file names in git diffs

Example structure:

presentation/
├── slides.md                      # Master file with includes
├── slides/
│   ├── 01-title.md                # Slide 1: Title
│   ├── 02-hook.md                 # Slide 2: Opening hook
│   ├── 03-problem-statement.md    # Slide 3: Problem introduction
│   ├── 04-architecture-overview.md # Slide 4: Architecture slide
│   ├── 18-conclusion.md           # Conclusion
│   └── 19-questions.md            # Q&A
└── public/images/

File naming: Individual slides use numeric prefix (01-, 02-, etc.) plus descriptive name for easy ordering in directory listings while maintaining meaningful names.

Master file example with slide number comments:

---
theme: default
title: My Presentation
---

---
src: ./slides/01-title.md
---
<!-- Slide 1: Title -->

---
src: ./slides/02-hook.md
---
<!-- Slide 2: Opening Hook -->

---
src: ./slides/03-problem-statement.md
---
<!-- Slide 3: Problem Statement -->

Note: Comments must come AFTER the closing --- (not inside frontmatter block) per Slidev specs.

Frontmatter merging: You can override frontmatter from external files:

---
src: ./slides/content.md
layout: two-cols  # Overrides layout in content.md
---

Frontmatter Configuration

Configure presentation globally in frontmatter at the top of slides.md:

---
theme: default
background: https://source.unsplash.com/collection/94734566/1920x1080
class: text-center
highlighter: shiki
lineNumbers: false
drawings:
  persist: false
transition: slide-left
title: Welcome to Slidev
---

Key frontmatter fields:

• theme: Visual theme (default, seriph, apple-basic, etc.)
• background: Global background image or color
• highlighter: Code highlighting engine (shiki or prism)
• lineNumbers: Show line numbers in code blocks
• transition: Slide transition effect
• title: Presentation title for metadata

Per-Slide Frontmatter

Configure individual slides with frontmatter after ---:

---
layout: center
background: './images/background.jpg'
class: 'text-white'
---

# Centered Slide

With custom background

Layouts

Slidev provides built-in layouts for different slide types:

Common Layouts

default - Standard layout with title and content:

# Title

Content here

center - Centered content:

---
layout: center
---

# Centered Title

cover - Cover slide for presentation start:

---
layout: cover
background: './bg.jpg'
---

# Presentation Title

Subtitle or author

intro - Introduction slide:

---
layout: intro
---

# Topic

Brief description

image-right - Content on left, image on right:

---
layout: image-right
image: './diagram.png'
---

# Content

Text goes here

image-left - Image on left, content on right:

---
layout: image-left
image: './photo.jpg'
---

# Content

Text goes here

two-cols - Two column layout:

---
layout: two-cols
---

# Left Column

Content for left

::right::

# Right Column

Content for right

quote - Large quote display:

---
layout: quote
---

# "Innovation distinguishes between a leader and a follower."

Steve Jobs

fact - Emphasize key fact or statistic:

---
layout: fact
---

# 95%

User satisfaction rate

Code Highlighting

Basic Code Blocks

\```python
def hello():
    print("Hello, World!")
\```

Line Highlighting

Highlight specific lines with {line-numbers}:

\```python {2-3}
def process():
    important_line

...