开源项目文档办公类新手
Slidev — 为开发者打造的 Markdown 演示幻灯片工具
Slidev 是一个面向开发者的演示幻灯片项目,以 Markdown 为核心编写内容,基于 Vite 与 Vue 3 构建,支持代码高亮、实时编码、主题定制、LaTeX 公式、Mermaid 图表、演讲者模式、绘图标注、录制与导出 PDF/PNG/PPTX,采用 MIT 许可证。
0 次阅读2026/09/17 发布
社区作者 · zZz
它解决什么问题
Slidev 的定位是“Presentation Slides for Developers”,即面向开发者(🧑💻👩💻👨💻)的演示幻灯片工具。项目由 Sponsor Program 赞助支持,官方提供 Video Preview 与 Documentation(配图 1 为 Slidev 的 Logo)。
核心特性(按来源原文):
- 📝 基于 Markdown:专注于内容,可使用自己习惯的编辑器。
- 🧑💻 开发者友好:内置代码高亮、实时编码(live coding)等。
- 🎨 可主题化(Themable):主题可作为 npm 包共享与复用。
- 🌈 时尚样式(Stylish):通过 UnoCSS 提供按需的工具类。
- 🤹 交互性(Interactive):无缝嵌入 Vue 组件。
- 🎙 演讲者模式(Presenter Mode):可使用另一个窗口,甚至用手机控制幻灯片。
- 🎨 绘图(Drawing):在幻灯片上绘制与标注。
- 🧮 LaTeX:内置 LaTeX 数学公式支持。
- 📰 图表(Diagrams):使用 Mermaid 通过文本描述创建图表。
- 🌟 图标(Icons):直接访问任意图标集的图标。
- 💻 编辑器(Editor):集成编辑器,或使用 VSCode 扩展。
- 🎥 录制(Recording):内置录制与摄像头视图。
- 📤 可移植(Portable):导出为 PDF、PNG 或 PPTX。
- ⚡️ 快速:由 Vite 提供即时重载。
- 🛠 可扩展(Hackable):可使用 Vite 插件、Vue 组件或任意 npm 包。
技术栈(Tech Stack):
- Vite:极快的前端工具链。
- 由 Vue 3 驱动的 Markdown:专注内容,同时在需要时拥有 HTML 与 Vue 组件的能力。
- UnoCSS:按需的 utility-first CSS 引擎,方便为幻灯片设置样式。
- Shiki、Monaco Editor:一流的代码片段支持与实时编码能力。
- RecordRTC:内置录制与摄像头视图。
- VueUse 系列:@vueuse/core、@vueuse/motion 等。
- Iconify:图标集集合。
- Drauu:绘图与标注支持。
- KaTeX:LaTeX 数学渲染。
- Mermaid:文本化图表。
文档与社区:官方文档提供 English、中文文档、Français、Español、Русский、Português-BR 等语言;Discord 社区地址为 chat.sli.dev。完整示例可查看仓库中的 demo 目录,该目录同时也是作者上一次演讲的源文件。赞助商部分列出了支持该项目的赞助者(配图 3 为赞助商 Logo),在线试用入口参见配图 2 所示的 StackBlitz 入口。
— 本文由 AI 根据公开来源辅助整理,命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
环境准备:
- 本机需安装 Node.js >= 22.12.0(安装 Node.js 即自带 npm)。
方式一:在线试用
- 直接访问 sli.dev/new,在浏览器中创建并试用 Slidev,无需本地安装。
方式二:本地初始化项目
- 安装 Node.js >= 22.12.0。
- 在终端执行初始化命令:
npm init slidev- 按该命令的交互提示完成项目创建(初始化过程会在本地生成 Slidev 项目结构与依赖)。
- 初始化完成后按交互提示/生成的说明启动项目,在浏览器中预览幻灯片;开发过程由 Vite 提供即时重载。
编辑器与编写:
- 可直接使用自己熟悉的编辑器编写 Markdown 内容,也可使用 Slidev 的集成编辑器,或安装 VSCode 扩展。
导出与展示:
- 导出格式支持 PDF、PNG、PPTX。
- 演示时可使用演讲者模式,在另一个窗口甚至手机上控制幻灯片。
学习与排错资源:
- 官方文档:提供 English、中文文档、Français、Español、Русский、Português-BR。
- 完整示例:仓库中的 demo 目录(也是作者上一次演讲的源文件)。
- 社区:Discord chat.sli.dev。
- 说明:来源未提供更细的排错 FAQ 条目、具体启动脚本名或导出命令,相关细节请以上述官方文档与初始化命令的提示为准。
适用场景
用 Markdown 编写技术演讲
分享与教学幻灯片
在幻灯片中做代码高亮与实时编码(live coding)演示
无缝嵌入 Vue 组件实现交互式演示
使用演讲者模式在另一个窗口或手机上控制幻灯片
在幻灯片上绘制与标注批注
用 LaTeX 编写数学公式
用 Mermaid 通过文本描述生成图表
内置录制并带摄像头视图
用于制作演示视频
将幻灯片导出为 PDF
PNG 或 PPTX 进行分发
