Slidev

定义

Slidev 是一款基于网页的幻灯片制作与演示工具，名称由 slide 与 dev 缩写合成，读音为 /slaɪdɪv/。它的源文件是一份可扩展语法的 Markdown 文本，默认入口文件为 slides.md，工具会将这份文本解析为可在浏览器中翻页放映的幻灯片。与传统所见即所得的幻灯片软件不同，Slidev 把内容书写与版式呈现分开，让作者专注于文本本身^[1]。

原理

Slidev 的工作流程可以概括为：Markdown 源文件经解析后转为 Vue 单文件组件，再由 Vite 开发服务器在浏览器中渲染^[3]。由于这一链路建立在 Vite 之上，编辑器中的改动会通过热模块替换即时反映到浏览器画面，无需手动刷新^[1]。

在语法层面，Slidev 用独占一行的 --- 作为分页符，文件开头的 frontmatter 称为 headmatter，用于配置整套幻灯片，其后每一页也可各自带有 frontmatter。幻灯片画布被定义为固定尺寸，默认为 980×552 像素，再随用户屏幕等比缩放，因此可以安全地使用绝对定位^[4]。

代码块由 Shiki 提供语法高亮，可开启行号、指定行高亮乃至显示两段代码的差异；数学与化学公式通过 KaTeX 渲染，图表则由 Mermaid 或 PlantUML 依据文本描述生成^[5]。这些能力共同构成了它在技术类演示中的基础。

发展历程

该项目由 Anthony Fu 发起，起因是他在共享代码片段时需要反复借助其他工具处理，于是尝试用前端技术栈自行解决^[6]。项目仓库于 2021 年 4 月 24 日创建，采用 MIT 许可证，主要使用 TypeScript 编写^[2]。

早期版本的样式层依赖 Windi CSS，代码高亮同时引入 Prism 与 Shiki^[7]。后续版本改以 UnoCSS 作为原子化 CSS 引擎，并把 Shiki 与 Monaco 编辑器作为代码支持的主力，同时加入内置录制与摄像头视图。

项目在开源社区获得较快增长，2021 年冲上 GitHub 热榜时约为 6 千颗星^[6]；到 2025 年 4 月约为 36.3 千颗星^[8]，2026 年初已达约 44.1 千颗星^[9]。文档提供中文、英文等多种语言版本^[10]。

应用

Slidev 主要用于技术大会演讲、产品需求评审、教学培训课件、项目进度汇报和技术方案分享等场景^[11]。演讲者模式会在独立窗口中显示当前页、下一页与备注，并配有计时器，也支持用手机等设备作为遥控器控制翻页^[9]。

在内容呈现方面，它可以嵌入 Vue 组件实现实时投票、动态图表等交互，也能把代码块变成带自动补全的 Monaco 编辑器并在演示中直接运行^[1]。内置的绘图模式允许在幻灯片上直接标注，录制功能则可保存屏幕与摄像头画面^[5]。

部署与分发上，Slidev 支持一键导出为 PDF、PPTX 或 PNG 图片，也可以构建为静态单页应用托管在任意位置^[12]。本地使用需先安装 Node.js，通过 npm init slidev 等命令创建项目，也可在浏览器中借助在线环境直接试用。

局限

Slidev 的定位并非取代 PowerPoint 或 Keynote 一类所见即所得的幻灯片软件，后者上手直观，更适合非开发者使用^[1]。它的写作方式依赖 Markdown 与 frontmatter 配置，需要作者具备一定的文本标记与命令行基础。

导出链路上仍有约束：生成 PDF、PNG 等格式需要额外安装无头浏览器相关依赖^[4]，导出 PPTX 的能力在部分资料中仍被标注为实验性^[3]。本地开发要求安装 Node.js，官方文档给出的版本要求为 22.12.0 及以上，而较早的第三方介绍多写为 18 及以上，实际使用需以当前文档为准。

此外，幻灯片以网页应用形式存在，动画与版式的精细控制更接近前端开发工作，对不熟悉 Web 技术的使用者而言学习成本高于同类 Markdown 幻灯片工具^[8]。

参见

• Markdown —— Slidev 编写幻灯片的源文件格式。

• Vue —— Slidev 用于渲染幻灯片与构建交互组件的框架。

• Vite —— Slidev 所依赖的前端构建工具，提供即时热更新。

• LaTeX —— Slidev 内置数学公式排版支持的语法体系。

• Reveal.js —— 另一款开源的 HTML 幻灯片框架。

• Marp —— 同样以 Markdown 为输入、侧重简洁与可移植性的幻灯片工具。