Slidev三条命令做出带代码高亮和实时预览的技术分享【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidevSlidev 是一款面向开发者的 Markdown 幻灯片工具你用纯文本写好每一页浏览器即时把它渲染成真正的网页。代码高亮、可交互组件、演讲者备注、屏幕录制都内置其中适合经常需要讲代码的前端工程师和技术分享主讲人。 解决什么问题写技术分享的 PPT很多人都有同款烦恼排版靠拖框、挪字一旦要改一行代码就得重新截图、重新对齐代码直接贴进去没有语法着色手动调格式费时还容易错展示三种包管理器的安装命令时更是来回翻页演讲时眼前只有当前页下一句说什么、讲到哪了全靠自己硬记。Slidev 的思路很直接把幻灯片当成一份文本来管理。内容就是.md文件能进 Git、能 diff、能协作而浏览器端负责把它变成有交互能力的展示页。 核心功能演示如何在同一页切换 npm / yarn / pnpm 的命令场景开场要演示安装命令但观众用的包管理器各不相同一页放三行代码又太挤。实现在 Markdown 里写一个 code-group 块每段代码标注标签名渲染后就是可点击切换的标签页而不是三块并列的长代码::code-group bash [npm] npm i slidevyarn global add slidevpnpm add -g slidev::[](https://link.gitcode.com/i/44c9b922c9a0d158a08ad65b273c4567) **对比传统做法**以往是截图→贴进 PPT→手动调字号→再切下一页现在同一页点标签就切换观众看到的永远是高亮准确、宽度自适应的那一份。 ### 如何边改代码边看幻灯片效果 **场景**讲到某个接口定义想现场改一行参数看看幻灯片上代码块的变化。 **实现**打开侧边编辑器画面左半是正在播放的幻灯片右半是代码面板改动即刻反映到左侧。 [](https://link.gitcode.com/i/44c9b922c9a0d158a08ad65b273c4567) **好处**不用切回浏览器、不用刷新讲到哪里改哪里连排错演示都能现场完成。 ### 如何边讲边看到下一页和备注 **场景**正式分享时你不想让观众看到下一步提示又怕讲到一半忘了要点。 **实现**进入演讲者模式你的窗口里同时出现当前页、下一页缩略图和每页的备注区备注就是写在页面末尾的 HTML 注释大屏幕上只显示当前页。 [](https://link.gitcode.com/i/44c9b922c9a0d158a08ad65b273c4567) **好处**节奏感从背稿变成看稿翻车概率小很多。 ## 快速上手 安装只需一条命令。前提是本地已装好 Node.js22.12.0 以上它会在当前目录生成一个可运行的 Slidev 项目 bash npm init slidevlatest生成的slides.md头部几行就是全部最小配置换主题、改标题都在这里完成--- theme: seriph title: 我的第一次技术分享 ---保存后启动开发服务器浏览器里就是可点击翻页的实时预览npm run dev跑起来的第一眼通常就是下面这页 serif 主题风格的封面讲完之后想要 PDF 或静态站点分别运行npx slidev export需先按 docs/guide/exporting.md 安装 playwright-chromium 依赖和npx slidev build即可。 适合谁使用如果你是用 Markdown 写文档、习惯用 Git 管代码的技术分享者、前端团队内部讲师Slidev 能省掉你排版和录制的绝大部分时间如果你需要复杂的多媒体动画编排、或由非技术人员长期维护企业模板传统 PPT 工具可能更省力。官方文档docs/完整示例项目demo/CLI 核心实现packages/slidev/浏览器端运行时packages/client/一句话总结Slidev 让讲代码的人用写代码的方式做幻灯片从第一行 Markdown 到成品 PDF中间不需要任何拖拽。【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考