Back to Details

slidev

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Slidev - Presentation Slides for Developers

Slidev - 面向开发者的演示幻灯片

Web-based slides maker built on Vite, Vue, and Markdown.
基于 Vite、Vue 和 Markdown 构建的 Web 幻灯片制作工具。

When to Use

适用场景

  • Technical presentations or slidedecks 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
  • Code walkthroughs for developer talks or workshops
  • 带有实时代码示例的技术演示或幻灯片
  • 带动画的语法高亮代码片段
  • 交互式演示（Monaco 编辑器、可运行代码）
  • 数学公式（LaTeX）或图表（Mermaid、PlantUML）
  • 使用演讲者备注录制演示
  • 导出为 PDF、PPTX，或作为 SPA 托管
  • 用于开发者演讲或工作坊的代码讲解

Quick Start

快速开始

bash
pnpm create slidev    # Create project
pnpm run dev          # Start dev server (opens http://localhost:3030)
pnpm run build        # Build static SPA
pnpm run export       # Export to PDF (requires playwright-chromium)
Verify: After 
pnpm run dev
, confirm slides load at 
http://localhost:3030
. After 
pnpm run export
, check the output PDF exists in the project root.
bash
pnpm create slidev    # Create project
pnpm run dev          # Start dev server (opens http://localhost:3030)
pnpm run build        # Build static SPA
pnpm run export       # Export to PDF (requires playwright-chromium)
验证：运行 
pnpm run dev
后，确认幻灯片已在 
http://localhost:3030
加载。运行 
pnpm run export
后，检查输出 PDF 是否存在于项目根目录。

Basic Syntax

基本语法

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

First Slide

First Slide

Content here
Content here

Second Slide

Second Slide

More content
<!-- Presenter notes go here --> 

- `---` separates slides
- First frontmatter = headmatter (deck config)
- HTML comments = presenter notes
More content
<!-- Presenter notes go here --> 

- `---` 用于分隔幻灯片
- 第一个 frontmatter = headmatter（演示文稿配置）
- HTML 注释 = 演讲者备注

Core References

核心参考

TopicDescriptionReference
Markdown SyntaxSlide separators, frontmatter, notes, code blockscore-syntax
Animationsv-click, v-clicks, motion, transitionscore-animations
HeadmatterDeck-wide configuration optionscore-headmatter
FrontmatterPer-slide configuration optionscore-frontmatter
CLI CommandsDev, build, export, theme commandscore-cli
ComponentsBuilt-in Vue componentscore-components
LayoutsBuilt-in slide layoutscore-layouts
ExportingPDF, PPTX, PNG export optionscore-exporting
HostingBuild and deploy to various platformscore-hosting
Global Context$nav, $slidev, composables APIcore-global-context
主题描述参考
Markdown 语法幻灯片分隔符、frontmatter、备注、代码块core-syntax
动画v-click、v-clicks、motion、transitionscore-animations
Headmatter演示文稿级配置选项core-headmatter
Frontmatter单张幻灯片配置选项core-frontmatter
CLI 命令开发、构建、导出、主题命令core-cli
组件内置 Vue 组件core-components
布局内置幻灯片布局core-layouts
导出PDF、PPTX、PNG 导出选项core-exporting
托管构建并部署到各种平台core-hosting
全局上下文$nav、$slidev、composables APIcore-global-context

Feature Reference

功能参考

Code & Editor

代码与编辑器

FeatureUsageReference
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 
comark: 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
功能用法参考
行高亮
```ts {2,3}
code-line-highlighting
基于点击的高亮
```ts {1|2-3|all}
code-line-highlighting
行号
lineNumbers: true
或 
{lines:true}
code-line-numbers
可滚动代码
{maxHeight:'100px'}
code-max-height
代码标签页
::code-group
（需要 
comark: true
）		code-groups
Monaco 编辑器
```ts {monaco}
editor-monaco
运行代码
```ts {monaco-run}
editor-monaco-run
编辑文件
<<< ./file.ts {monaco-write}
editor-monaco-write
代码动画
````md magic-move
code-magic-move
TypeScript 类型
```ts twoslash
code-twoslash
导入代码
<<< @/snippets/file.js
code-import-snippet

Diagrams & Math

图表与数学

FeatureUsageReference
Mermaid diagrams
```mermaid
diagram-mermaid
PlantUML diagrams
```plantuml
diagram-plantuml
LaTeX math
$inline$
or 
$$block$$
diagram-latex
功能用法参考
Mermaid 图表
```mermaid
diagram-mermaid
PlantUML 图表
```plantuml
diagram-plantuml
LaTeX 数学公式
$inline$
或 
$$block$$
diagram-latex

Layout & Styling

布局与样式

FeatureUsageReference
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
功能用法参考
画布尺寸
canvasWidth
、
aspectRatio
layout-canvas-size
缩放幻灯片
zoom: 0.8
layout-zoom
缩放元素
<Transform :scale="0.5">
layout-transform
布局插槽
::right::
、
::default::
layout-slots
作用域 CSS幻灯片中的 
<style>
style-scoped
全局图层
global-top.vue
、
global-bottom.vue
layout-global-layers
可拖拽元素
v-drag
、
<v-drag>
layout-draggable
图标
<mdi-icon-name />
style-icons

Animation & Interaction

动画与交互

FeatureUsageReference
Click animations
v-click
, 
<v-clicks>
core-animations
Rough markers
v-mark.underline
, 
v-mark.circle
animation-rough-marker
Drawing modePress 
C
or config 
drawings:
animation-drawing
Direction styles
forward:delay-300
style-direction
Note highlighting
[click]
in notes		animation-click-marker
功能用法参考
点击动画
v-click
、
<v-clicks>
core-animations
Rough 标记
v-mark.underline
、
v-mark.circle
animation-rough-marker
绘图模式按 
C
或配置 
drawings:
animation-drawing
方向样式
forward:delay-300
style-direction
备注高亮备注中的 
[click]
animation-click-marker

Syntax Extensions

语法扩展

FeatureUsageReference
Comark syntax
comark: true
+ 
{style="color:red"}
syntax-comark
Block frontmatter
```yaml
instead of 
---
syntax-block-frontmatter
Import slides
src: ./other.md
syntax-importing-slides
Merge frontmatterMain entry winssyntax-frontmatter-merging
功能用法参考
Comark 语法
comark: true
+ 
{style="color:red"}
syntax-comark
块级 frontmatter
```yaml
，而不是 
---
syntax-block-frontmatter
导入幻灯片
src: ./other.md
syntax-importing-slides
合并 frontmatter主入口优先syntax-frontmatter-merging

Presenter & Recording

演讲者与录制

FeatureUsageReference
RecordingPress 
G
for camera		presenter-recording
Timer
duration: 30min
, 
timer: countdown
presenter-timer
Remote control
slidev --remote
presenter-remote
Ruby text
notesAutoRuby:
presenter-notes-ruby
功能用法参考
录制按 
G
打开摄像头		presenter-recording
计时器
duration: 30min
、
timer: countdown
presenter-timer
远程控制
slidev --remote
presenter-remote
Ruby 文本
notesAutoRuby:
presenter-notes-ruby

Export & Build

导出与构建

FeatureUsageReference
Export options
slidev export
core-exporting
Build & deploy
slidev build
core-hosting
Build with PDF
download: true
build-pdf
Cache imagesAutomatic for remote URLsbuild-remote-assets
OG image
seoMeta.ogImage
or 
og-image.png
build-og-image
SEO tags
seoMeta:
build-seo-meta
Export prerequisite: 
pnpm add -D playwright-chromium
is required for PDF/PPTX/PNG export. If export fails with a browser error, install this dependency first.
功能用法参考
导出选项
slidev export
core-exporting
构建与部署
slidev build
core-hosting
构建 PDF
download: true
build-pdf
缓存图片远程 URL 自动缓存build-remote-assets
OG 图片
seoMeta.ogImage
或 
og-image.png
build-og-image
SEO 标签
seoMeta:
build-seo-meta
导出前置条件：PDF/PPTX/PNG 导出需要安装 
pnpm add -D playwright-chromium
。如果导出时出现浏览器错误，请先安装此依赖项。

Editor & Tools

编辑器与工具

FeatureUsageReference
Side editorClick edit iconeditor-side
VS Code extensionInstall 
antfu.slidev
editor-vscode
Prettier
prettier-plugin-slidev
editor-prettier
Eject theme
slidev theme eject
tool-eject-theme
MCP server (AI agents)
http://localhost:<port>/__mcp
or 
slidev mcp
tool-mcp
功能用法参考
侧边编辑器点击编辑图标editor-side
VS Code 扩展安装 
antfu.slidev
editor-vscode
Prettier
prettier-plugin-slidev
editor-prettier
提取主题
slidev theme eject
tool-eject-theme
MCP 服务器（AI Agent）
http://localhost:<port>/__mcp
或 
slidev mcp
tool-mcp

Lifecycle & API

生命周期与 API

FeatureUsageReference
Slide hooks
onSlideEnter()
, 
onSlideLeave()
api-slide-hooks
Navigation API
$nav
, 
useNav()
core-global-context
功能用法参考
幻灯片钩子
onSlideEnter()
、
onSlideLeave()
api-slide-hooks
导航 API
$nav
、
useNav()
core-global-context

Common Layouts

常用布局

LayoutPurpose
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
布局用途
cover
标题/封面幻灯片
center
居中内容
default
标准幻灯片
two-cols
双栏（使用 
::right::
）
two-cols-header
标题加双栏
image
/ 
image-left
/ 
image-right
图片布局
iframe
/ 
iframe-left
/ 
iframe-right
嵌入 URL
quote
引用
section
章节分隔页
fact
/ 
statement
数据/陈述展示
intro
/ 
end
介绍/结束幻灯片

Resources

资源