name: slidev
description: 为开发者创建和呈现基于Web的幻灯片，使用Markdown、Vue组件、代码高亮、动画和交互功能。适用于构建技术演示、会议演讲或教学材料。
Slidev - 开发者的演示幻灯片
基于Vite、Vue和Markdown构建的Web幻灯片制作工具。
何时使用
- 带有实时代码示例的技术演示
- 带有动画的语法高亮代码片段
- 交互式演示（Monaco编辑器、可运行代码）
- 数学公式（LaTeX）或图表（Mermaid、PlantUML）
- 录制带有演讲者备注的演示
- 导出为PDF、PPTX或作为SPA托管
快速开始
pnpm create slidev # 创建项目
pnpm run dev # 启动开发服务器
pnpm run export # 导出为PDF
基础语法
---
theme: default
title: 我的演示
---
# 第一张幻灯片
内容在这里
---
# 第二张幻灯片
更多内容
<!--
演讲者备注写在这里
-->
--- 分隔幻灯片- 第一个frontmatter = headmatter（演示配置）
- HTML注释 = 演讲者备注
核心参考
| 主题 |
描述 |
参考链接 |
| Markdown语法 |
幻灯片分隔符、frontmatter、备注、代码块 |
核心语法 |
| 动画 |
v-click、v-clicks、motion、transitions |
核心动画 |
| Headmatter |
演示全局配置选项 |
核心headmatter |
| Frontmatter |
每张幻灯片的配置选项 |
核心frontmatter |
| CLI命令 |
Dev、build、export、theme命令 |
核心CLI |
| 组件 |
内置Vue组件 |
核心组件 |
| 布局 |
内置幻灯片布局 |
核心布局 |
| 导出 |
PDF、PPTX、PNG导出选项 |
核心导出 |
| 托管 |
构建并部署到各种平台 |
核心托管 |
| 全局上下文 |
$nav、$slidev、composables API |
核心全局上下文 |
功能参考
代码和编辑器
| 功能 |
用法 |
参考链接 |
| 行高亮 |
```ts {2,3} |
代码行高亮 |
| 基于点击的高亮 |
```ts {1|2-3|all} |
代码行高亮 |
| 行号 |
lineNumbers: true 或 {lines:true} |
代码行号 |
| 可滚动代码 |
{maxHeight:'100px'} |
代码最大高度 |
| 代码选项卡 |
::code-group（需要 mdc: true） |
代码组 |
| Monaco编辑器 |
```ts {monaco} |
编辑器Monaco |
| 运行代码 |
```ts {monaco-run} |
编辑器Monaco运行 |
| 编辑文件 |
<<< ./file.ts {monaco-write} |
编辑器Monaco写入 |
| 代码动画 |
````md magic-move |
代码魔术移动 |
| TypeScript类型 |
```ts twoslash |
代码twoslash |
| 导入代码 |
<<< @/snippets/file.js |
代码导入片段 |
图表和数学
布局和样式
| 功能 |
用法 |
参考链接 |
| 画布尺寸 |
canvasWidth、aspectRatio |
布局画布尺寸 |
| 缩放幻灯片 |
zoom: 0.8 |
布局缩放 |
| 缩放元素 |
<Transform :scale="0.5"> |
布局变换 |
| 布局插槽 |
::right::、::default:: |
布局插槽 |
| 作用域CSS |
幻灯片中的 <style> |
样式作用域 |
| 全局层 |
global-top.vue、global-bottom.vue |
布局全局层 |
| 可拖拽元素 |
v-drag、<v-drag> |
布局可拖拽 |
| 图标 |
<mdi-icon-name /> |
样式图标 |
动画和交互
| 功能 |
用法 |
参考链接 |
| 点击动画 |
v-click、<v-clicks> |
核心动画 |
| 粗略标记 |
v-mark.underline、v-mark.circle |
动画粗略标记 |
| 绘图模式 |
按 C 或配置 drawings: |
动画绘图 |
| 方向样式 |
forward:delay-300 |
样式方向 |
| 备注高亮 |
备注中的 [click] |
动画点击标记 |
语法扩展
演讲者和录制
| 功能 |
用法 |
参考链接 |
| 录制 |
按 G 开启摄像头 |
演讲者录制 |
| 计时器 |
duration: 30min、timer: countdown |
演讲者计时器 |
| 远程控制 |
slidev --remote |
演讲者远程 |
| 注音文本 |
notesAutoRuby: |
演讲者备注注音 |
导出和构建
| 功能 |
用法 |
参考链接 |
| 导出选项 |
slidev export |
核心导出 |
| 构建和部署 |
slidev build |
核心托管 |
| 构建带PDF |
download: true |
构建PDF |
| 缓存图片 |
自动缓存远程URL |
构建远程资源 |
| OG图片 |
seoMeta.ogImage 或 og-image.png |
构建OG图片 |
| SEO标签 |
seoMeta: |
构建SEO元数据 |
编辑器和工具
生命周期和API
| 功能 |
用法 |
参考链接 |
| 幻灯片钩子 |
onSlideEnter()、onSlideLeave() |
API幻灯片钩子 |
| 导航API |
$nav、useNav() |
核心全局上下文 |
常用布局
| 布局 |
用途 |
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 |
介绍/结束幻灯片 |
资源