在技术分享、架构设计评审、开源项目介绍等场景中，演示文稿早已不只是“翻页的 PPT”。它需要代码、动画、实时演示，甚至需要像一个 Web 应用一样可交互、可扩展。
Slidev，正是为这种需求而生的演示文稿工具。
一、为什么选择 Slidev？
市面上并不缺幻灯片工具：
- PowerPoint / Keynote：所见即所得，上手简单
- Reveal.js / Marp：面向技术人员，支持 Markdown
但如果你是开发者，尤其是前端或全栈工程师，你很快会遇到这些问题：
- 代码展示不够专业或不够灵活
- 演示内容难以版本控制
- 无法轻松加入交互、动画、实时示例
- 演示与 Web 技术割裂
Slidev 的定位非常明确：用开发者最熟悉的方式，做最有表现力的演示。
二、Slidev 的核心理念
1️⃣ 基于 Markdown，专注内容
Slidev 使用扩展的 Markdown 作为幻灯片的核心格式：
- 内容即文档，结构清晰
- 天然支持 Git 版本管理
- 任意编辑器都可编写（VS Code / Vim / Web）
Markdown
---
title: Welcome to Slidev
theme: seriph
---
# Hello Slidev
这是我的第一张幻灯片
你不需要一开始就理解所有能力，只需一个 Markdown 文件即可启动，能力是渐进式引入的。
2️⃣ 为开发者而生的代码体验
Slidev 在“代码展示”这件事上几乎做到了极致：
- Shiki 高精度语法高亮
- 行号、行高亮、最大高度控制
- Shiki Magic Move：代码演进动画
- TwoSlash：TypeScript 类型悬停提示
- Monaco Editor：
- 可编辑
- 可运行
- 可 diff
- 类 VS Code 体验
👉 对技术分享来说，这是“杀手级能力”。
三、强大的 Web 能力加持
🎨 主题系统（npm 即装即用）
Bash
npm i @slidev/theme-seriph
一行配置即可切换主题，官方与社区都提供了大量高质量主题。
🤹 Vue 组件 + 交互式演示
Slidev 并不是“渲染 Markdown 到页面”，而是：
在 Vue 3 + Vite 上运行的 Web 应用
这意味着：
- 可以直接在幻灯片中使用 Vue 组件
- 支持状态、事件、动画、请求 API
- 可嵌入 iframe、WebGL、Canvas、Three.js
Vue
<MyCounter />
这让演示从“展示内容”升级为“展示系统本身”。
⚡ 基于 Vite 的极速体验
- 修改即更新（HMR）
- 几乎零延迟
- 插件体系开放灵活
这让写幻灯片像写前端项目一样顺畅。
四、与其他工具的对比
与 PowerPoint / Keynote
| 对比项 | Slidev | PPT / Keynote |
|---|---|---|
| 代码支持 | ⭐⭐⭐⭐⭐ | ⭐ |
| Git 版本管理 | ✅ | ❌ |
| Web 技术 | 全支持 | 几乎不支持 |
| 自定义能力 | 极强 | 有限 |
| 目标用户 | 开发者 | 非技术用户 |
👉 Slidev 并不是替代 PPT，而是替代“技术演示用 PPT”
与 Reveal.js
- 更简洁：以 Markdown 为主，而不是 HTML
- 原生 Vue 支持
- Vite + 插件体系
- UnoCSS 原子化样式
与 Marp
- 同样简单上手
- 功能覆盖更广
- 原生支持 Vue、动画、交互
- 更适合中大型技术演示
五、快速上手 Slidev
1️⃣ 创建项目（推荐）
Bash
npm init slidev@latest
要求：
- Node.js ≥ 18
2️⃣ 启动开发服务器
Bash
slidev
或：
JSON
{
"scripts": {
"dev": "slidev --open",
"build": "slidev build",
"export": "slidev export"
}
}
3️⃣ 常用命令
slidev：启动开发模式slidev build：构建静态站点slidev export：导出 PDF / PPTX / PNGslidev format：格式化幻灯片
六、Slidev 的技术栈一览
Slidev 本身就是一个优秀的前端工程实践案例：
- Vite：极速构建与 HMR
- Vue 3：组件化、响应式
- UnoCSS：原子化样式
- Shiki / Monaco Editor：专业代码体验
- Mermaid / KaTeX：图表与数学公式
- RecordRTC：录屏与摄像头
- VueUse 全家桶：动画、交互、状态管理
七、演讲、录制与部署
🎤 演讲者模式
- 观众模式 + 演讲者模式双窗口
- 支持备注（Notes）
- 演示与讲稿分离
🎥 内置录制功能
- 屏幕 + 摄像头
- 可用于课程、分享视频
📤 导出与部署
- PDF / PPTX / PNG
- 构建为静态 SPA
- 可部署到任意静态服务器
Bash
slidev build
八、适合谁使用 Slidev？
- 技术分享 / 技术大会演讲
- 开源项目介绍
- 前端 / 全栈课程
- 架构设计说明
- 团队技术方案评审
如果你曾经觉得：
“PPT 不配承载我的代码和想法”
那么，Slidev 就是你的答案。
九、结语
Slidev 并不是一个“更好看的幻灯片工具”，
而是一个 把演示当作 Web 应用来构建的开发者平台。
当你开始用代码、组件和动画来讲故事，
你会发现：演示，本身也可以是一种工程艺术。
📌 项目地址
如果你是开发者，强烈建议至少用 Slidev 做一次分享。
文章评论