Slidev:用 Markdown 快速做出可交互的开发者幻灯片【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev技术分享前最常见的两个麻烦:代码贴在 PPT 里又丑又难改,演讲时既没有备注也没有计时,全靠硬撑。Slidev 是一个面向开发者的 Markdown 幻灯片工具,把演示文稿写成一个普通的 .md 文件,代码高亮、逐条动画、演讲者备注、计时和录制都内建在浏览器里,不需要再开第二套工具。先判断它适不适合你适合:经常做技术分享、内部分享、录教程视频的人;幻灯片里代码占比高,且希望内容与代码一起进 Git 仓库做版本管理。适合:需要现场演示交互效果(实时运行的代码、可点击的组件)的场景。不适合:以图片排版和美术设计为主、几乎不写代码的演示;或者需要非技术人员直接拖拽编辑幻灯片的场合。实际使用时要记住一点:Slidev 的幻灯片是一个本地运行的 Web 应用,交互式内容在浏览器里效果完整,导出成文件后会降级(后文会说明)。三分钟建一个能跑的幻灯片项目本地需要 Node.js 22.12 以上版本,然后一条命令创建项目:pnpm create slidev按提示选择模板和包管理器即可。如果想跳过项目模板、只用一个 .md 文件跑,也可以全局安装 CLI:npm i -g slidev/cli slidev slides.md创建完成后执行npm run dev(模板已配好脚本),浏览器会打开本地开发服务,默认端口 3030。第一次启动后你会直接看到模板自带的 demo 页,里面演示了大部分常用功能,可以边翻边对照:空格键翻页,o键进入快速概览跳转任意页,d键切换深浅色;页面左下角出现导航栏,里面有演讲者模式、录制、导出等入口;修改slides.md里的任何一行,浏览器里的预览立即更新,不需要手动刷新。生成的项目结构大致是:my-slides/ ├─ slides.md # 幻灯片正文,所有页面都写在这里 ├─ components/ # 自定义 Vue 组件 ├─ style.css # 全局样式 └─ vite.config.ts # 构建配置页面之间的分隔就是一行---,每页上方可以加一段 YAML frontmatter 配置主题、布局、背景等,例如layout: cover表示这一页用封面版式。在 Markdown 里展示代码:高亮、行高亮与命令对比代码是 Slidev 最核心的使用场景。普通 Markdown 代码块会被 Shiki 引擎自动着色,支持上百种语言,不需要手动截图排版。ts function greet(name: string) { return Hello, ${name} }围绕代码块,常用的三个增强: 1. **逐行揭示**:列表或代码块配合点击动画,每次按空格显示一部分,观众跟着你的节奏看,而不是一次性看到整段代码。 2. **行号与行高亮**:给代码块加上行号,或用 3、1-3 这样的行号参数高亮特定行,配合讲解定位。 3. **代码分组**:同一页放多个代码块,页面里渲染成标签页,观众点击标签切换。展示 npm / yarn / pnpm 三种安装命令时最常用,页面不会挤成一团: md ::code-group bash [npm] npm install slidev/clipnpm add slidev/cli::[](https://link.gitcode.com/i/37620c3f6ee569a8ab88b6ba6ffad373) 除了静态代码,还可以把代码放进 Monaco 编辑器(就是 VS Code 里同款编辑器),在幻灯片里现场改代码、现场运行,适合 live coding。 ## 演讲现场:演示者模式、备注与计时 正式演讲时的标准用法是开两个浏览器窗口:一个播放器界面投给观众,另一个是演示者模式(地址栏加 /presenter 即可访问)。演示者模式里同时显示当前页、下一页预览、这一页的备注和计时器;你在自己的窗口翻页,观众窗口自动同步。 [](https://link.gitcode.com/i/37620c3f6ee569a8ab88b6ba6ffad373) 具体做法: - **写备注**:在每页 Markdown 末尾放一个 HTML 注释,Slidev 会把最后一段注释当作该页的演讲备注,支持 Markdown 语法。写稿阶段可以先不写,之后到 /notes-edit 页面批量补全所有页的备注。 - **计时**:frontmatter 里设置 duration: 35min,演示者模式会显示倒计时,超时一目了然。 - **快速调整版式**:演示者视图提供三种布局,按屏幕尺寸选择——当前页大图在上、或备注靠左、或下一页放大预览。 - **遥控翻页**:开发服务器加 --remote 参数后,手机或另一台设备可以打开同一地址跟着翻页,适合站在台上走动的场合。 如果这次分享需要留档,Slidev 内置录制:点导航栏的录制按钮,可以选择把摄像头画面嵌进幻灯片画面一起录,也可以录成两个独立视频文件,不用另装 OBS。 [](https://link.gitcode.com/i/37620c3f6ee569a8ab88b6ba6ffad373) ## 换主题与调风格:改一行配置或 eject 到本地 主题在 frontmatter 第一行声明。新建项目默认模板是 seriph(衬线、复古感),换成 default 就是更简洁的现代风格,其他主题以 npm 包形式存在,可以按名字直接切换,不需要改任何组件: yaml --- theme: seriph title: 我的技术分享 duration: 20min ---想更深度定制时有两条路:轻量:每页 frontmatter 里加class应用 UnoCSS 工具类,或写 scoped CSS 只作用于当前页,不改主题本身。彻底:执行slidev theme eject把当前主题整个拷到项目本地,之后按普通 Vue 组件和 CSS 随意改,主题改动不会随升级丢失。导出 PDF、PPTX 与静态站点导出走 CLI,格式由--format决定。以 PDF 为例,需要先在项目里装playwright-chromium(负责无头渲染):npm i -D playwright-chromium npm run export常见导出路径:slidev export:导出 PDF,默认输出slides-export.pdf,适合邮件分发和打印。slidev export --format pptx:每页导出为图片的 PPTX,文字不可选,但视觉最忠实;--format pptx-editable则重建为 PowerPoint 原生形状,文字可选中可编辑,代价是部分元素(图标、Mermaid 图等)仍是图片。slidev export --format png:导出逐页 PNG。slidev build:构建成一个可托管的单页应用,部署到任何静态托管服务,观众在浏览器里打开仍是完整的交互版本。一个必须知道的事实:导出文件里交互能力(可运行的代码、组件点击等)会失效,只保留静态呈现。所以要保留交互时,正确做法是build后托管,而不是导出。浏览器里也可以直接导:导航栏更多菜单中的 Export,或访问http://localhost:3030/export,适合不想碰 CLI 的场合。进阶:把幻灯片当小型前端项目当你不满足于文字 代码时,Slidev 的边界其实是 Vue 的能力边界:嵌组件:components/目录下任意 Vue 组件都能直接写进 Markdown 页面,计时器、计数器、数据可视化都可以现场跑;画图:Mermaid 代码块直接渲染流程图、时序图,LaTeX 块渲染公式;编辑体验:浏览器内置的分屏编辑器(右侧写 Markdown、左侧看效果)之外,还有 VS Code 扩展提供补全和格式化工具;协作:幻灯片就是 Markdown,进 Git 后改动能 diff、能 review、能进 CI 自动构建部署,组件和样式可以在多场分享之间复用。什么场合用,什么场合别用适合:技术评审、内部培训、开源项目分享、录课程视频、需要现场 demo 的演讲;内容以代码和文字为主,作者会写 Markdown。不适合:以视觉排版和插画为主的发布会式演示;接收方要求在 PowerPoint 里随意拖拽编辑的正式交付(此时用pptx-editable导出并提前说明哪些元素是图片);团队里完全不会写代码的人需要独立维护幻灯片。和常见工具的关系:它替代的是写 PPT 软件里的代码页这一小块,而不是整个 PPT 工作流。代码密集的页面用 Slidev 维护,其余纯文字页留在 PowerPoint,是目前比较常见的混合做法。下一步如果只是想快速做一场分享:pnpm create slidev建项目 → 在slides.md里用---分页 → 把现有代码贴进代码块 →npm run export出一份 PDF。之后按需再加演示者备注、代码分组和录制,不需要一次性把所有功能都用上。【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考