Slidev 快速上手指南用一个 Markdown 文件做出会动的技术演示【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev把代码截图贴进 PPT 之后格式对不齐、字体发虚、改一行还得重新截图——做过技术分享的人都经历过这种挫败。Slidev 就是为了解决这类问题而生的开发者演示工具幻灯片直接写成 Markdown 文本代码高亮、Vue 组件、Mermaid 图表原地嵌入浏览器里实时预览一条命令就能导出 PDF。看完本文你大约 3 分钟就能跑起自己的第一份演示文稿。为什么代码页总在演示里翻车传统幻灯片软件是二进制文件代码要么截图、要么手动敲进文本框。截图无法搜索、无法 diff想跟踪哪次演讲改了哪句更是无从下手。Slidev 把幻灯片整个变成了文本文件天然支持 Git 版本控制和多人协作同事改错一个字你在代码评审里就能看见。它的核心思路只有一句话把幻灯片当成一个前端项目来做。内容写在 Markdown 里样式用 CSS 控制需要交互时就嵌入 Vue 组件——你熟悉什么技术栈就用什么技术栈做演示。代码展示切换三种包管理器只需一行配置展示用 npm 还是 pnpm 装这种对比内容时你过去得来回切页、手动擦黑板。在 Slidev 里用::code-group把几个代码块包起来观众就能看到一组带标签的选项卡点一下切换 npm、yarn、pnpm 三种安装命令。::code-group bash [npm] npm install slidev/cli bash [pnpm] pnpm add -g slidev/cli ::高亮引擎 Shiki 支持 200 多种语言行号、行高亮、逐行动画Magic Move都是内置能力语法参考 docs/features/code-groups.md。演讲时观众看不到你的笔记正式开讲前最紧张的时刻往往是你忘了下一页要说什么。Slidev 的演示者模式让你和观众看两个不同的画面你的窗口同时显示当前页、下一页预览、演讲备注和计时器观众端只显示干净的画面你在自己窗口翻页所有投屏页面自动同步。另外它内置录制功能支持摄像头画中画讲完课直接得到一个可分享的视频不用再装屏幕录制软件。三行配置换主题一句话切换复古风觉得默认样式太素在 slides.md 开头的前置信息里改一行 theme 就行不用碰任何 CSS。--- theme: seriph background: https://cover.sli.dev ---theme 是一个 npm 包社区分享的主题拿来即用想完全自定义可以再用 UnoCSS 工具类和 CSS 变量往下深挖。快速安装步骤与项目结构速览装好 Node.js22.12.0 以上后一条命令初始化项目npm init slidev执行npm run dev启动开发服务器浏览器里就能实时预览改完保存即时生效无需手动刷新。生成的项目结构非常扁平每项一眼能懂slides.md— 主演示文稿一行---分隔一页components/— 你自己的 Vue 组件直接在幻灯片里用标签调用public/— 静态资源图片、字体放这里style.css— 全局样式文件进阶方向可以按需要再展开文档里都有对应章节导出与部署PDF、PNG 序列、PPTX 三种导出方式见 docs/guide/exporting.md主题定制与 UnoCSS 按需样式见 docs/custom/index.md语法速查表分隔符、点击动画、布局见 docs/guide/syntax.mdSlidev 把做演示这件事从图形软件搬回了代码编辑器文本创作、实时预览、一键导出整个流程都在你的开发工作流里。现在打开终端敲下npm init slidev今晚就能把那份憋了很久的技术分享做出来。【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考