Slidev 简介
Slidev 是什么
Slidev（Slide + Vue）是一款面向开发者的演示文稿工具：用 Markdown 编写幻灯片内容，底层由 Vue 3 + Vite 驱动，输出一个可直接部署的静态站点。它把"写代码"与"做 PPT"结合起来——幻灯片本质上就是一份 Markdown 文件，运行一条命令即可在浏览器中预览。
一个最简单的 Slidev 演示文稿只有一份 slides.md：
---
theme: seriph
---
# 你好，Slidev
用 Markdown 写幻灯片，用 Vue 做交互。
---
## 第二张幻灯片
- 支持代码高亮
- 支持数学公式
- 支持图表执行 slidev 后，浏览器打开 http://localhost:3030 即可预览这份演示文稿。
与主流演示工具的对比
| 维度 | PPT / Keynote | Reveal.js | Marp | Slidev |
|---|---|---|---|---|
| 内容形式 | 二进制文件 | HTML | Markdown | Markdown |
| 上手门槛 | 拖拽操作 | 需写 HTML/JS | 低 | 低 |
| 代码高亮 | 手动配置 | 插件 | 有限支持 | 内置 Shiki |
| 数学公式 | 插件 | 插件 | 插件 | 内置 KaTeX |
| 图表 | 手动绘制 | 库集成 | 有限 | 内置 Mermaid |
| 交互能力 | 动画预设 | 手动开发 | 弱 | Vue 指令 + 组件 |
| 主题系统 | 模板商店 | CSS 主题 | CSS | npm 主题包 |
| 导出 | 原生 | Playwright | PDF/PPTX/PNG | |
| 录制 | 内置 | 需集成 | 不支持 | 内置录音 + 摄像头 |
| 开发者扩展 | 受限 | 自由 | 受限 | Vue 组件/插件/主题 |
- PPT / Keynote：面向非技术场景，可视化编辑成熟，但内容锁定在二进制文件，难与代码协作。
- Reveal.js：功能强大的 HTML 演示框架，灵活但需要手写大量 HTML/JavaScript。
- Marp：轻量 Markdown 转幻灯片，上手极快，但图表、动画、交互能力较弱。
- Slidev：兼具 Markdown 的简洁与 Vue 生态的扩展性，代码相关的演示体验最完整。
八大优势
① Markdown 写作
幻灯片内容就是 Markdown 文本，天然支持版本控制（Git）、代码审查、多人协作；不需要拖拽排版，注意力集中在内容本身。
② 开发者友好
代码块使用 Shiki 高亮（与 VS Code 同款引擎），支持行号、行高亮、Monaco 在线编辑器；内置 Mermaid 图表与 KaTeX 数学公式，技术内容开箱即用。
③ 主题系统
Slidev 的主题是 npm 包，一条命令即可安装切换；主题提供布局、样式、组件整套方案，也可通过 eject 弹出后深度定制，风格统一且可复用。
④ 快速启动
基于 Vite 开发，保存即热更新；从零初始化到跑起来只需 pnpm create slidev 加一条命令，无需任何配置文件。
⑤ 可交互
内置 v-click、v-motion 等指令实现点击动画与动效；可以在幻灯片中直接嵌入 Vue 组件甚至运行 Monaco 代码，把演示变成可现场操作的工具。
⑥ 录制能力
内置录音与摄像头录制，支持画中画、绘图标注（Drauu），演示即录制，无需额外软件后期合成。
⑦ 跨平台
一切输出都是 Web：浏览器预览、构建为静态 SPA、导出 PDF/PPTX/PNG，可部署到 GitHub Pages、Netlify、Vercel 或任何静态服务器，无需安装演示软件。
⑧ 可自定义
底层是 Vue 3 组件：自定义布局、自定义组件、自定义样式（UnoCSS）、插件（addons）扩展，任何不满意的细节都能在代码层面修改。
适用场景
- 技术分享与会议演讲：代码、架构图、公式是标配，Slidev 全部内置。
- 课程与教程：Markdown 写作 + 版本管理，适合长期维护的教学材料。
- 开源项目介绍：打包成静态站点发布到 Pages，附赠网站级演示效果。
- 线上发布会与直播：录制功能与画中画摄像头适合远程演示。
- 团队内部培训：与代码工作流一致，可被 Git 管理与 CI 集成。