slidev

Slidev 是一个面向开发者的基于 Web 的演示幻灯片制作工具，构建在 Vite、Vue 和 Markdown 之上。

用途

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

快速开始

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: 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、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）代码标签页：::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）

生命周期与 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：嵌入 URL quote：引用 section：章节分隔 fact / statement：数据/陈述展示 intro / end：介绍/结束幻灯片

资源

文档：https://sli.dev 主题库：https://sli.dev/resources/theme-gallery 展示案例：https://sli.dev/resources/showcases

技能介绍

theme: default title: My Presentation

First Slide

Second Slide