slidev（slidev 工具）

Slidev

Slidev renders Markdown files as interactive slide presentations. Supports Vue components, UnoCSS styling, Shiki code highlighting, Mermaid diagrams, and LaTeX math.

Quick Start

# Create new project
pnpm create slidev

# Or with npm (downloads each time, slower)
npm init slidev@latest

# Dev server
slidev --open

# Export to PDF
slidev export

# Build static SPA
slidev build

Entry file defaults to slides.md. Pass different file: slidev other.md.

Slide Structure

Slides separated by --- with blank lines before/after:

---
theme: seriph
title: My Presentation
fonts:
  sans: Inter
  mono: Fira Code
---

# Slide 1: Title Slide

Content here.

---

# Slide 2

More content.

---
layout: center
class: text-center
---

# Centered Slide

This slide uses the `center` layout.

Headmatter (First Slide)

Configures entire deck:

Per-Slide Frontmatter

---
layout: two-cols
class: my-class
background: /image.png
transition: fade
clicks: 5
---

Speaker Notes

Comments at the END of a slide become presenter notes:

# My Slide

Content visible to audience.

<!--
Speaker notes here.
Only visible in presenter view.
Supports **markdown**.
-->

Code Blocks

Shiki syntax highlighting with language tag:

const greeting = 'Hello, Slidev!'

Line Highlighting

Options

For live code editing, see references/monaco.md.

Styling

UnoCSS Classes

<div class="text-3xl font-bold text-blue-500 p-4">
  Styled content
</div>

MDC Syntax

Enable with mdc: true in headmatter:

# Red Title {.text-red-500}

Paragraph with [styled link]{.text-green-500.underline}.

Scoped Styles

# My Slide

<style>
h1 { color: red; }
</style>

Global Styles

Create style.css in project root. Auto-imported.

Diagrams

Mermaid

graph LR A[Start] --> B{Decision} B -->|Yes| C[Action] B -->|No| D[End]

PlantUML

@startuml Alice -> Bob: Hello Bob --> Alice: Hi! @enduml

CLI Reference

Dev Server

slidev [entry]              # Start dev server (default: slides.md)
slidev --port 8080          # Custom port
slidev --open               # Open browser
slidev --remote             # Enable remote access
slidev --remote mypassword  # Password-protected remote

Build

slidev build                # Build to ./dist
slidev build --out public   # Custom output dir
slidev build --base /talks/ # Base URL for hosting

Export

slidev export                       # PDF (default)
slidev export --format png          # PNG per slide
slidev export --format pptx         # PowerPoint (images)
slidev export --format md           # Markdown with PNGs
slidev export --with-clicks         # Separate page per click
slidev export --dark                # Dark mode
slidev export --range 1,3-5         # Specific slides
slidev export --timeout 60000       # Longer timeout

Requires playwright-chromium: pnpm add -D playwright-chromium

References

Resources

• Docs: https://sli.dev
• Theme Gallery: https://sli.dev/resources/theme-gallery
• Addon Gallery: https://sli.dev/resources/addon-gallery