别再打开 PPT:4.9 万星 Slidev,用 Markdown 写幻灯片
- 2026-11-07 21:42:29
别再打开 PPT:4.9 万星 Slidev,用 Markdown 写幻灯片●01一个把幻灯片写成 Markdown 的工具●● Slidev 换了一个思路：把幻灯片写成一个 Markdown 文件。官方对它的定义很直白——Slidev（slide + dev，读作 /slaɪdɪv/）是一个基于 Web 的幻灯片制作与演示工具，为开发者而设计，让你能专注在 Markdown 里写内容；借助 Vue 这类网页技术，你可以在演示中做出像素级精确的布局，以及能当场操作的交互 Demo。 它和「又一个在线做 PPT 的网站」不是一回事。更准确的说法是：它把一份幻灯片当成一个前端项目来管理——内容是一个纯文本文件，样式交给主题和 CSS，代码块是真的能跑，整份演示可以用 Git 提交、diff、回滚。
●02起步只有一步：slides.md●● 创建项目只需要一条命令。官方推荐用 pnpm： ●●●bash 官方对 npm 那一条还专门加了提醒：每次新建项目都会重新下载依赖，既慢又占空间——所以更推荐 pnpm、yarn 或 bun。当然，你也可以全局装一个 CLI，直接对着单个文件跑： 创建完成后，项目里最重要的文件就是 ●●●slides.md 写到这里，一页封面就完成了。项目自带的脚本把常用动作都包好了： 
官方文档 Getting Started：一条 ●03为什么开发者会在意：代码是「一等公民」●● 如果只挑一个理由推荐 Slidev 给开发者，那就是它把「代码」当成了幻灯片里的一等公民。在传统工具里，代码块基本等同于图片：贴进去、不能选、不能跑、改一处要重新截图；而在这里，代码块本身就是幻灯片的数据。 底层的语法高亮用的是 Shiki——和 VS Code 同源的引擎，配色与你编辑器里看到的一致。再往上还有两个更好玩的特性： 再往前一步，是内置的 Monaco Editor——也就是 VS Code 的编辑器内核。你可以把一段可编辑的代码直接搬进幻灯片，现场敲、现场看结果、还带自动补全。这才是真正的 live coding——代码在幻灯片里是活的。 而最能一眼看懂的，是官网首屏那段演示。左边是一个 
官网首页演示区逐帧录制（动图，深色模式）：左侧在 ●04它的底层，是一个网页应用●● Slidev 并不是把 Markdown「渲染成图片」，而是把幻灯片当成一个真正跑在浏览器里的 Vue 应用。看它的技术栈就很清楚： 因为底层就是网页，「网页里能做的一切」在这里大多成立：嵌 iframe、发请求调 API、甚至上 WebGL。官方把这一点概括为一个词——hackable，你想改什么，总有 Web 技术可以下手。这也是它和「Markdown 转 PDF」类工具最根本的分野。 
Slidev 官网首屏：左边是 ●05官方亲口做的对比●● 这类工具最不缺的就是「我比 PPT 强」的口号，所以更有参考价值的，是官方自己列的对比——它甚至先承认了对手的优点：PowerPoint 和 Keynote「直观、易学，对非开发者来说是最好的选择之一」。随后它给出的，是面向开发者时自己的优势：
换句话说，它的对手从来不是「好看的 PPT」，而是「开发者被迫用不顺手的方式做 PPT」。 ●06说点实话：门槛、代价与边界●● 把话说全，Slidev 的「自由」是有代价的。下面几条，最好是先知道再决定。 一句话判断： 适合：技术分享、内部例会、课程教学，以及任何需要现场跑代码、放公式图表（KaTeX / Mermaid）、并且希望幻灯片能进 Git 的场合。 别用：要精细视觉交付的设计型 PPT、团队里没人愿意碰代码、或者你只想用五分钟快速糊一份简单汇报——那种情况，打开 PPT 反而更快。 ● Slidev 官网 https://sli.dev/ GitHub 仓库 https://github.com/slidevjs/slidev Getting Started 文档 https://sli.dev/guide/ 官方主题库 https://sli.dev/resources/theme-gallery
导语做技术分享的人大概都遇到过这种事：内容其实早就想清楚了，卡住的是最后一步——把 Demo 截成图贴进 PPT、为了一段代码重新调排版、改个字号又要拖动十几个文本框。幻灯片本该只是内容的容器，却常常反过来吃掉内容本身的精力。
# 推荐：用 pnpm 创建pnpm create slidev# 也可以用 npm，但官方注明偏慢npm init slidev@latest
slidev slides.md。slides.md——它承载全部内容。三个连字符是分页符，文件开头的 frontmatter 用来指定主题和版式：---theme: defaultlayout: cover---# 给开发者的幻灯片用 Markdown 写，Vue 组件随时嵌
npm run dev 起本地服务、浏览器里实时预览；npm run build 打包成静态站点；npm run export 导出成文件。改一个字，页面即时刷新，不用手动保存、也不用等编译。pnpm create slidev 就能起步，运行前提是 Node.js 22.12.0 及以上（图源：sli.dev）Shiki Magic Move 能让代码块在翻页时以动画形式平滑地增减行，讲「改造前 / 改造后」特别直观；TwoSlash 则能把 TypeScript 的类型推导结果直接标在代码旁边，讲类型系统时省掉一堆口头解释。./slides.md 编辑窗，右侧的幻灯片随着敲字实时长出来；当你把文件开头的 frontmatter 里 layout 改成 center，右侧幻灯片的版式当场重排。同一份内容、两种视图——改的是源码，动的是成品：./slides.md 里写 Markdown，右侧幻灯片实时渲染；把 frontmatter 的 layout 改成 center，幻灯片版式当场从顶部切换为居中（图源：sli.dev 首页演示区，已切至深色主题录制）- ●Vite
——开发服务器，改一个字页面即时更新（HMR），不用手动刷新 - ●Vue 3
——可以直接在幻灯片里写组件，做交互演示 - ●UnoCSS
——按需生成的原子化 CSS，调样式不用来回切文件 - ●Shiki + Monaco
——代码高亮与实时编辑 - ●Drauu
——演示过程中在页面上手写批注 - ●KaTeX / Mermaid
——数学公式与流程图，都用文本描述生成
./slides.md 源码，右边是它渲染出来的幻灯片，一份内容两种视图（图源：sli.dev）- ●前提不低
：需要 Node.js 22.12.0 及以上，比一般前端项目更挑版本 - ●导出要额外装东西
：导出 PDF / PPTX 依赖 playwright-chromium，首次会下载浏览器内核 - ●它的自由建立在写代码上
：不熟悉 Markdown 或前端的人，上手曲线明显比拖拽式工具陡 - ●不是设计师工具
：要精细的视觉排版，Figma / Keynote 仍然更顺手，官方自己承认所见即所得更适合非开发者 - ●规模参考
：@slidev/cli 周下载约 9.8 万，Reveal.js 约 15.2 万——两者口径不同，仅作数量级参考，不代表「谁更好」 - ●迭代很快
：版本号已经到 v53，大版本之间偶有配置变化，升级前建议看一眼更新说明
相关链接
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
