slidev

Slidev - 开发者专属的演示文稿工具

基于 Vite、Vue 和 Markdown 打造的网页版 PPT / Slides 制作工具。

适用场景

• 包含实时代码示例的技术演示或幻灯片
• 带动画效果的语法高亮代码片段
• 交互式 Demo（Monaco 编辑器、可运行代码）
• 数学公式（LaTeX）或图表（Mermaid、PlantUML）
• 带有演讲者备注的演示录制
• 导出为 PDF、PPTX 或作为静态 SPA 托管
• 技术分享或 Workshop 上的代码串讲 / Walkthrough

快速上手

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、主题相关命令	core-cli
组件	内置 Vue 组件	core-components
布局	内置幻灯片布局	core-layouts
导出	PDF、PPTX、PNG 导出选项	core-exporting
托管部署	构建并部署到各大平台	core-hosting
全局上下文	$nav、$slidev、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
代码渐变动画 (Magic Move)	````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 数学公式	$inline$ 或 $$block$$	diagram-latex

布局与样式

功能	用法	参考链接
画布尺寸	canvasWidth, aspectRatio	layout-canvas-size
幻灯片缩放	zoom: 0.8	layout-zoom
缩放元素	<Transform :scale="0.5">	layout-transform
布局插槽 (Slots)	::right::, ::default::	layout-slots
作用域 CSS (Scoped 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 合并规则	主入口文件配置优先	syntax-frontmatter-merging

演讲者模式与录制

功能	用法	参考链接
录制功能	按 G 键开启摄像头	presenter-recording
计时器	duration: 30min, timer: countdown	presenter-timer
远程控制	slidev --remote	presenter-remote
拼音/注音 (Ruby)	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
导出/解包主题	slidev theme eject	tool-eject-theme
MCP 服务器（AI Agents 专用）	http://localhost:<port>/__mcp 或 slidev mcp	tool-mcp

生命周期与 API

功能	用法	参考链接
幻灯片钩子 (Hooks)	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	内嵌网页 (Iframe) 布局
quote	引用金句
section	章节过渡页
fact / statement	核心数据 / 强调文案
intro / end	开场 / 结束页

相关资源

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