slidev
Create and present web-based slides for developers using Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, or teaching materials.
安装与使用
请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。
查看来源 ↗使用指南技能说明
Slidev - Presentation Slides for Developers
Web-based slides maker built on Vite, Vue, and Markdown.
When to Use
- Technical presentations with live code examples
- Syntax-highlighted code snippets with animations
- Interactive demos (Monaco editor, runnable code)
- Mathematical equations (LaTeX) or diagrams (Mermaid, PlantUML)
- Record presentations with presenter notes
- Export to PDF, PPTX, or host as SPA
Quick Start
pnpm create slidev # Create project
pnpm run dev # Start dev server
pnpm run export # Export to PDF
Basic Syntax
---
theme: default
title: My Presentation
---
# First Slide
Content here
---
# Second Slide
More content
<!--
Presenter notes go here
-->
-
---separates slides - First frontmatter = headmatter (deck config)
- HTML comments = presenter notes
Core References
| Topic | Description | Reference |
|---|---|---|
| Markdown Syntax | Slide separators, frontmatter, notes, code blocks | core-syntax |
| Animations | v-click, v-clicks, motion, transitions | core-animations |
| Headmatter | Deck-wide configuration options | core-headmatter |
| Frontmatter | Per-slide configuration options | core-frontmatter |
| CLI Commands | Dev, build, export, theme commands | core-cli |
| Components | Built-in Vue components | core-components |
| Layouts | Built-in slide layouts | core-layouts |
| Exporting | PDF, PPTX, PNG export options | core-exporting |
| Hosting | Build and deploy to various platforms | core-hosting |
| Global Context | $nav, $slidev, composables API | core-global-context |
Feature Reference
Code & Editor
| Feature | Usage | Reference |
|---|---|---|
| Line highlighting | ```ts {2,3} |
code-line-highlighting |
| Click-based highlighting | ```ts {1|2-3|all} |
code-line-highlighting |
| Line numbers | lineNumbers: true or {lines:true} |
code-line-numbers |
| Scrollable code | {maxHeight:'100px'} |
code-max-height |
| Code tabs | ::code-group (requires mdc: true) |
code-groups |
| Monaco editor | ```ts {monaco} |
editor-monaco |
| Run code | ```ts {monaco-run} |
editor-monaco-run |
| Edit files | <<< ./file.ts {monaco-write} |
editor-monaco-write |
| Code animations | ````md magic-move |
code-magic-move |
| TypeScript types | ```ts twoslash |
code-twoslash |
| Import code | <<< @/snippets/file.js |
code-import-snippet |
Diagrams & Math
| Feature | Usage | Reference |
|---|---|---|
| Mermaid diagrams | ```mermaid |
diagram-mermaid |
| PlantUML diagrams | ```plantuml |
diagram-plantuml |
| LaTeX math | $inline$ or $$block$$ |
diagram-latex |
Layout & Styling
| Feature | Usage | Reference |
|---|---|---|
| Canvas size | canvasWidth, aspectRatio |
layout-canvas-size |
| Zoom slide | zoom: 0.8 |
layout-zoom |
| Scale elements | <Transform :scale="0.5"> |
layout-transform |
| Layout slots | ::right::, ::default:: |
layout-slots |
| Scoped CSS | <style> in slide |
style-scoped |
| Global layers | global-top.vue, global-bottom.vue |
layout-global-layers |
| Draggable elements | v-drag, <v-drag> |
layout-draggable |
| Icons | <mdi-icon-name /> |
style-icons |
Animation & Interaction
| Feature | Usage | Reference |
|---|---|---|
| Click animations | v-click, <v-clicks> |
core-animations |
| Rough markers | v-mark.underline, v-mark.circle |
animation-rough-marker |
| Drawing mode | Press C or config drawings: |
animation-drawing |
| Direction styles | forward:delay-300 |
style-direction |
| Note highlighting | [click] in notes |
animation-click-marker |
Syntax Extensions
| Feature | Usage | Reference |
|---|---|---|
| MDC syntax | mdc: true + {style="color:red"} |
syntax-mdc |
| Block frontmatter | ```yaml instead of --- |
syntax-block-frontmatter |
| Import slides | src: ./other.md |
syntax-importing-slides |
| Merge frontmatter | Main entry wins | syntax-frontmatter-merging |
Presenter & Recording
| Feature | Usage | Reference |
|---|---|---|
| Recording | Press G for camera |
presenter-recording |
| Timer | duration: 30min, timer: countdown |
presenter-timer |
| Remote control | slidev --remote |
presenter-remote |
| Ruby text | notesAutoRuby: |
presenter-notes-ruby |
Export & Build
| Feature | Usage | Reference |
|---|---|---|
| Export options | slidev export |
core-exporting |
| Build & deploy | slidev build |
core-hosting |
| Build with PDF | download: true |
build-pdf |
| Cache images | Automatic for remote URLs | build-remote-assets |
| OG image | seoMeta.ogImage or og-image.png |
build-og-image |
| SEO tags | seoMeta: |
build-seo-meta |
Editor & Tools
| Feature | Usage | Reference |
|---|---|---|
| Side editor | Click edit icon | editor-side |
| VS Code extension | Install antfu.slidev |
editor-vscode |
| Prettier | prettier-plugin-slidev |
editor-prettier |
| Eject theme | slidev theme eject |
tool-eject-theme |
Lifecycle & API
| Feature | Usage | Reference |
|---|---|---|
| Slide hooks | onSlideEnter(), onSlideLeave() |
api-slide-hooks |
| Navigation API | $nav, useNav() |
core-global-context |
Common Layouts
| Layout | Purpose |
|---|---|
cover |
Title/cover slide |
center |
Centered content |
default |
Standard slide |
two-cols |
Two columns (use ::right::) |
two-cols-header |
Header + two columns |
image / image-left / image-right |
Image layouts |
iframe / iframe-left / iframe-right |
Embed URLs |
quote |
Quotation |
section |
Section divider |
fact / statement |
Data/statement display |
intro / end |
Intro/end slides |
Resources
- Documentation: https://sli.dev
- Theme Gallery: https://sli.dev/resources/theme-gallery
- Showcases: https://sli.dev/resources/showcases
使用示例
查看来源仓库中的使用示例与配置说明。
查看来源 ↗来源历史
- 收录时间
- 2026-03-11
- 索引更新时间
- 2026-03-11
- Branch
- main
收录与同步日期属于本站记录。源码修改历史请查看来源仓库。
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!