slidev

Slidev - 专为开发者打造的演示文稿工具

基于 Vite、Vue 和 Markdown 构建的 Web 演示文稿生成工具。

适用场景

• 需要实时展示代码示例的技术演讲或演示文稿
• 带有动画效果的高亮语法代码片段
• 交互式 Demo 展示（如 Monaco 编辑器、可运行的代码）
• 数学公式（LaTeX）或图表（Mermaid、PlantUML）
• 带演讲者备注的演讲录制
• 导出为 PDF、PPTX 或直接作为 SPA 单页应用托管部署
• 开发者分享、工作坊（Workshop）中的代码演练与讲解

快速开始

pnpm create slidev    # 创建项目
pnpm run dev          # 启动开发服务器（自动打开 http://localhost:3030）
pnpm run build        # 构建静态 SPA
pnpm run export       # 导出为 PDF（需要安装 playwright-chromium）

验证方法：运行 pnpm run dev 后，确认幻灯片能在 http://localhost:3030 正常加载。运行 pnpm run export 后，检查项目根目录是否已生成 PDF 文件。

基本语法

---
theme: default
title: 我的演示文稿
---

# 第一页幻灯片

这里是内容

---

# 第二页幻灯片

更多内容

<!--
这里是演讲者备注
-->

• 使用 --- 分割幻灯片
• 第一个 frontmatter 块即为 headmatter（全局配置）
• HTML 注释将作为演讲者备注

核心参考指南

主题	说明	参考链接
Markdown 语法	幻灯片分隔符、frontmatter、备注、代码块	core-syntax
动画效果	v-click、v-clicks、motion、页面过渡	core-animations
Headmatter	全局配置选项	core-headmatter
Frontmatter	单页幻灯片配置选项	core-frontmatter
CLI 命令	Dev、build、export、theme 等命令	core-cli
组件	内置 Vue 组件	core-components
布局	内置幻灯片布局	core-layouts
导出	PDF、PPTX、PNG 导出选项	core-exporting
部署托管	构建并部署到各类平台	core-hosting
全局上下文	$nav、$slidev 以及组合式 API（composables API）	core-global-context

特性速查

代码与编辑器

特性	用法	参考链接
行高亮	```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
代码标签页 (Tabs)	::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

图表与数学公式

特性	用法	参考链接
Mermaid 图表	```mermaid	diagram-mermaid
PlantUML 图表	```plantuml	diagram-plantuml
LaTeX 数学公式	$行内公式$ 或 $$块级公式$$	diagram-latex

布局与样式

特性	用法	参考链接
画布尺寸	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

动画与交互

特性	用法	参考链接
点击动画	v-click、<v-clicks>	core-animations
手绘风标记 (Rough markers)	v-mark.underline、v-mark.circle	animation-rough-marker
绘图/涂鸦模式	按 C 键或配置 drawings:	animation-drawing
方向控制样式	forward:delay-300	style-direction
备注联动高亮	备注中的 [click]	animation-click-marker

语法扩展

特性	用法	参考链接
Comark 语法	comark: true + {style="color:red"}	syntax-comark
块级 frontmatter	用 ```yaml 替换 ---	syntax-block-frontmatter
导入外部幻灯片	src: ./other.md	syntax-importing-slides
前置元数据合并 (Frontmatter merging)	主入口配置优先	syntax-frontmatter-merging

演讲与录制

特性	用法	参考链接
录制功能	按 G 键开启摄像头	presenter-recording
计时器	duration: 30min、timer: countdown	presenter-timer
远程控制	slidev --remote	presenter-remote
拼音/注音 (Ruby text)	notesAutoRuby:	presenter-notes-ruby

导出与构建

特性	用法	参考链接
导出选项	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-side
VS Code 插件	安装 antfu.slidev	editor-vscode
Prettier	prettier-plugin-slidev	editor-prettier
弹出主题 (Eject theme)	slidev theme eject	tool-eject-theme

生命周期与 API

特性	用法	参考链接
页面钩子	onSlideEnter()、onSlideLeave()	api-slide-hooks
导航 API	$nav、useNav()	core-global-context

常用布局列表

布局名称	用途说明
cover	标题页 / 封面页
center	居中布局
default	标准默认页
two-cols	双列布局（结合 ::right:: 使用）
two-cols-header	顶部标题 + 双列布局
image / image-left / image-right	图片布局系列
iframe / iframe-left / iframe-right	内嵌 Web 页面/网页链接
quote	引用金句页
section	章节过渡页
fact / statement	数据强调 / 核心观点展示
intro / end	个人介绍页 / 结束尾页

相关资源

• 官方文档：https://sli.dev
• 主题市场：https://sli.dev/resources/theme-gallery
• 案例展示：https://sli.dev/resources/showcases