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 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
  • 包含实时代码示例的技术演示文稿
  • 带语法高亮和动画效果的代码片段
  • 交互式演示（Monaco编辑器、可运行代码）
  • 数学公式（LaTeX）或图表（Mermaid、PlantUML）
  • 带演讲者备注的演示录制
  • 导出为PDF、PPTX格式，或作为SPA部署

Quick Start

快速开始

bash
pnpm create slidev    # Create project
pnpm run dev          # Start dev server
pnpm run export       # Export to PDF
bash
pnpm create slidev    # Create project
pnpm run dev          # Start dev server
pnpm run export       # Export to 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语法幻灯片分隔符、全局配置、备注、代码块core-syntax
动画效果v-click、v-clicks、动态效果、过渡动画core-animations
全局配置演示文稿级别的配置选项core-headmatter
单页配置单张幻灯片的配置选项core-frontmatter
CLI命令开发、构建、导出、主题相关命令core-cli
内置组件内置Vue组件core-components
内置布局内置幻灯片布局core-layouts
导出功能PDF、PPTX、PNG导出选项core-exporting
部署托管构建并部署至各类平台core-hosting
全局上下文$nav、$slidev、组合式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 
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
功能使用方式参考链接
行高亮
```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
（需开启 
mdc: 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
手绘标记
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
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 frontmatterMain entry winssyntax-frontmatter-merging
功能使用方式参考链接
MDC语法
mdc: true
+ 
{style="color:red"}
syntax-mdc
块级全局配置使用
```yaml
替代
---
syntax-block-frontmatter
导入幻灯片
src: ./other.md
syntax-importing-slides
配置合并规则主入口文件配置优先级更高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
注音文本
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
功能使用方式参考链接
导出选项
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

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
功能使用方式参考链接
侧边编辑器点击编辑图标editor-side
VS Code扩展安装
antfu.slidev
editor-vscode
Prettier插件
prettier-plugin-slidev
editor-prettier
导出主题
slidev theme eject
tool-eject-theme

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

资源