Slidev

做过技术分享的人大概都有这种体会：写代码很顺手，但做PPT特别折腾。想在幻灯片里放一段带高亮的代码，得截图、调格式，改一个变量名又要重新来一遍。Slidev就是冲着这个痛点来的。

Slidev读作/slaɪdɪv/，是slide和dev的组合词。它的作者是AnthonyFu，Vue、Vite、Nuxt核心团队成员，也是Vitest、VueUse、UnoCSS这些知名开源项目的创作者。简单说，这是一个懂开发者的人，为开发者做的工具。

它的核心逻辑很简单：你写一个Markdown文件，默认叫slides.md，用三个连字符 --- 分隔每一页幻灯片。就这么简单。代码块会自动获得语法高亮，数学公式用LaTeX写，流程图用Mermaid，需要交互的时候直接嵌Vue组件。编辑的时候浏览器实时刷新，你改一行文字，幻灯片立刻跟着变。

Slidev底层用的是Vite和Vue3，所以整个开发体验是“前端项目”级别的：热重载几乎是瞬间的，可以用npm安装主题，可以写自己的布局组件，可以把幻灯片构建成静态网页部署到任何地方。

官网入口地址

https://sli.dev/

中文文档入口：https://cn.sli.dev/

在线体验入口：https://sli.dev/new

开源项目地址

https://github.com/slidevjs/slidev

功能介绍

Markdown就是幻灯片

Slidev的源文件就是一个纯文本的Markdown文件。你用 # 写标题，用列表写要点，用三个连字符分页。不需要在图形界面里拖拽文本框，也不需要在多个面板之间切换。专注写内容就行，排版的事交给主题和布局。

代码展示是一等公民

这是Slidev和普通演示工具的区别。代码块不仅有精确的语法高亮（用的Shiki，和VSCode同款引擎），还支持行号、行高亮、代码分组。更特别的是Monaco编辑器集成，你可以在演讲过程中直接在幻灯片里改代码、运行代码，观众能看到实时效果。

主题和布局自由切换

在Markdown文件开头的frontmatter里写一行 theme:seriph，整个幻灯片的外观就变了。社区已经有很多现成的主题包，用npm就能装。每一页还可以指定不同的布局，比如封面页用cover，居中内容用center，分节页用section。

数学公式和图表原生支持

用 $ 包裹LaTeX公式就能渲染成数学符号。Mermaid让你用文字描述来画流程图、时序图、甘特图，不需要单独打开画图软件。

演示者模式

做技术演讲的时候，你可以打开一个独立的演示者窗口，里面能看到当前页的备注、下一页的预览、以及计时器。观众看到的和你看的是两个不同的界面。

内置录制和绘图

Slidev自带屏幕录制和摄像头视图，可以直接把演讲过程录下来。演讲过程中还可以在幻灯片上圈画标注，这个功能在讲代码或者架构图的时候挺实用。

导出格式灵活

做完之后可以导出成PDF、PPTX或者PNG图片。也可以构建成静态网页，部署到GitHub Pages、Vercel、Netlify这些平台，把链接发给别人就能在线看。

VSCode扩展

如果你习惯用VSCode写东西，官方有专门的扩展，可以在编辑器里预览幻灯片、拖拽调整页面顺序、获得语法提示。

应用场景

技术大会演讲和分享

这是Slidev最典型的场景。代码密集、需要实时演示、希望幻灯片本身就能体现技术品味。用Slidev做的技术演讲，代码高亮和排版都是“原生”的，不需要截图贴图。

教学和培训

老师或者培训师可以用它做课件。数学公式、流程图、代码示例都能直接写，不需要在多个软件之间来回切换。备注功能可以写讲义，演示者模式里能看到。

项目汇报和方案评审

团队内部做技术方案介绍、产品需求评审的时候，用Slidev可以快速产出一套结构清晰的幻灯片。因为源文件是纯文本，放进Git仓库还能追踪每次修改的内容差异。

个人笔记和知识整理

有些人把Slidev当成的“可视化笔记”用。学一个新东西的时候，用幻灯片的形式整理知识点，写出来就是一份可以直接分享的材料。

服务支持

Slidev是一个开源、MIT许可证的项目。这意味着你可以免费，包括商业用途，没有水印，没有导出次数限制，也不需要注册账号。

项目的主要维护者是AnthonyFu，同时有一个活跃的社区在贡献代码、主题和插件。官方Discord服务器是主要的交流渠道，中文用户也有QQ群可以加入。

使用Slidev需要本地安装Node.js，版本要求大约是22.0或以上。对于不熟悉命令行的用户，也有在线编辑器可以直接在浏览器里尝试，不需要安装任何东西。

文档方面，官方提供了英文和中文两套完整的指南，涵盖语法、配置、主题开发、部署等各个方面。GitHub仓库里的文件夹本身就是一个功能完整的示例幻灯片，可以作为学习的起点。