Slidev：用 Markdown 写幻灯片的完整指南，开发者演示文稿终极工具

Slidev用 Markdown 写幻灯片的完整指南开发者演示文稿终极工具【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidevSlidev 是一个基于 Markdown 的演示文稿工具你用写文档的方式写 PPT它就是一个会热更新的 Web 应用专为需要频繁展示代码的开发者设计。先看看你平时是怎么做技术分享的准备一次技术分享你大概率被这些细节折磨过PPT 里的代码块换个字体就全乱了手动复制粘贴后缩进对不齐想让观众看到代码一步步变化的过程只能截十几张图一张张翻页讲着讲着发现漏讲了一页还得靠硬记顺序找回来。Slidev 的思路是直接换掉这套工作流整个演示文稿就是一个 Markdown 文件改一个字浏览器里的预览立刻更新不用切窗口、不用重新渲染。左边实时预览右边直接编辑 Markdown改完即时生效场景一代码高亮、代码分组幻灯片里写代码有多简单# My First Slide theme: default ::code-group bash [npm] npm install slidev/clipnpm add -g slidev/cli::上面的片段就是一张 Slidev 幻灯片的全部内容。::code-group 会在页面上生成一排标签观众点一下就能在 npm / pnpm 不同命令间切换——对比不同框架、不同配置的场景不用再手动放两行代码。代码块本身由内置的 Shiki 引擎高亮支持两百多种语言你写什么语言就自动识别什么语言。 [](https://link.gitcode.com/i/fdfc71f665dca1145c0588f85c8c0e65) ## 场景二演讲当天用 Slidev 演示者模式和录制功能稳住节奏 [](https://link.gitcode.com/i/fdfc71f665dca1145c0588f85c8c0e65) *你的窗口有当前页、下一页预览和计时器观众只看到当前这一页* 按 P 进入演示者模式后你屏幕上的布局和观众看到的不一样你能看到当前页、下一页预览、可编辑的演讲备注和计时器观众那边只有干净的当前幻灯片。演讲备注的写法也很省事——每一页最后一个 !-- 注释 -- 块就是这一页的备注。 讲完想留档内置录制功能支持摄像头画中画你的画面和屏幕内容一起录进一个视频文件直接发出去就行。 bash npm run export一条命令把整套幻灯片导出成 PDF带--with-clicks还能把每次点击动画的中间状态都展开成独立页面。想部署成静态网页把命令换成npm run build即可。为什么它比 PPT 多走了一步幻灯片里能跑真实的 Vue 组件传统工具里代码只是被展示的字符串在 Slidev 里代码可以真的跑起来。你可以往幻灯片里直接嵌 Vue 组件、调用 VueUse、做可交互的示例甚至让观众在幻灯片里点按钮。你的演示文稿本质上是一个 Web 应用而不是一堆固定图片。样式层面它用 UnoCSS也就是在 HTML 标签里直接写原子化 CSS 类配合 CSS 变量改主题不用到处找样式文件。想换整套视觉风格在文件头改一行就行theme: seriph适合谁要讲代码、讲架构的技术分享者、团队 Tech Talk 主讲人做编程课程、教程视频的创作者录制功能天然配套开源项目维护者把幻灯片仓库化用 Git 追踪每次修改团队成员协作改稿就像改代码如何快速上手 Slidev先装好 Node.js22.12.0 以上然后npm init slidev # 交互式创建项目装好 CLI 和主题 npm run dev # 启动本地服务自动打开浏览器预览npm init slidev会生成一个项目脚手架npm run dev启动本地服务器并在 3030 端口打开预览。生成的目录里你只需要关心两处slides.md主演示文稿所有内容都在这个文件里components/你自己写的 Vue 组件在 Markdown 里直接MyComponent /引用更多语法和配置细节看仓库里的 docs/ 目录即可。一句话总结如果你做的是任何需要展示代码的技术分享Slidev 值得现在就换——写 Markdown 就能开工导出 PDF、部署网页、录视频全是内置能力。【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考