slidev

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

基于 Vite、Vue 和 Markdown 构建的网页版幻灯片制作工具。

适用场景

• 包含实时代码示例的技术演示或幻灯片
• 带语法高亮和动画的代码片段
• 交互式演示（Monaco 编辑器、可运行代码）
• 数学公式（LaTeX）或图表（Mermaid、PlantUML）
• 录制演示并附带演讲者备注
• 导出为 PDF、PPTX，或作为 SPA 托管
• 面向开发者讲座或工作坊的代码讲解

快速开始

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。

基本语法

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

# First Slide

Content here

---

# Second Slide

More content

• --- 用于分隔幻灯片
• 第一个 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	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
代码标签页	::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 数学公式	$inline$ 或 $$block$$	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
手绘标记	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
注音文本	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 Agent）	http://localhost:<port>/__mcp 或 slidev mcp	tool-mcp

Lifecycle & API

Feature	Usage	Reference
Slide hooks	onSlideEnter(), onSlideLeave()	api-slide-hooks
Navigation API	$nav, useNav()	core-global-context

Common Layouts

Layout	Purpose
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

Resources

• Documentation: https://sli.dev
• Theme Gallery: https://sli.dev/resources/theme-gallery
• Showcases: https://sli.dev/resources/showcases