Slidev:给开发者的 Markdown 演示文稿工具,5 分钟写会动的幻灯片【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev在幻灯片里讲代码,你是不是也经历过复制粘贴、高亮错乱、截图一截完就过期的狼狈?Slidev是一款面向开发者的演示文稿工具:你用 Markdown 写作,浏览器里实时看到可预览、可导出、还能嵌入 Vue 组件的演示。代码高亮,一次写对技术分享里最磨人的往往是代码部分。截图贴进幻灯片,字体走样;手动粘贴,高亮又不对。Slidev 内置 Shiki 引擎,代码块写完即自动着色,还能标记要强调的行、加上行号。更妙的是代码分组。假设你同页要展示三个包管理器的安装命令:::code-group sh [npm] npm i slidev/cli sh [yarn] yarn add slidev/cli sh [pnpm] pnpm add slidev/cli ::幻灯片里它会渲染成标签页,观众点一下就能在 npm、yarn、pnpm 之间切换。对比框架配置、对比环境命令,一个代码块顶三个,细节见代码分组文档。代码分组把多个代码块渲染成可切换的标签页,技术对比一目了然演示者模式,忘词也不慌想象你正在做一场技术分享,讲到紧张处,下一句从脑子里消失了。演示者模式就是为这种时刻准备的:你的屏幕上同时是当前页、下一页预览、演讲备注和计时器;而观众看到的只是当前幻灯片。你甚至可以在手机上打开演示者视图来翻页。除此之外,内置的录制功能支持摄像头画中画,屏幕与讲解一次录成一条视频,录完直接得到视频文件,发出去就能播,适合做教学录屏或会议留档。演示者模式为演讲者提供下一页预览、备注与计时器⚡ 用写代码的方式写幻灯片整场演示就是一个slides.md加几个 Vue 组件,你习惯的工程化操作全都原样可用:Git 版本控制:每次改文案都留在提交历史里团队协作:冲突解决方式和代码冲突一样直接CI/CD:流水线里跑slidev build,产出可托管的单页应用热更新:基于 Vite,改一行字浏览器立刻变化,不用手动刷新代价是你的演示从桌面上一个文件变成了一个项目。但对开发者来说,这恰恰是舒适区。 一行换主题想换演示的视觉风格,通常不用碰 CSS。在slides.md顶部的 frontmatter 里直接指定:--- theme: seriph background: /bg.png # public 目录下的背景图 title: 我的技术分享 ---主题就是普通的 npm 包,装完即用。内置的default适合日常技术分享,seriph更偏正式场合。想再深入,可以用 CSS 变量和 UnoCSS 工具类给单页排版,甚至把主题 eject 到本地项目里逐行改造。seriph 主题带复古衬线风格,适合更正式的演讲 5 分钟上手:四条命令做出第一场演示装好 Node.js(22.12 以上),然后:npm init slidev cd 项目名 npm i npm run dev最后一步启动开发服务器,浏览器会自动打开 3030 端口的本地页面,看到的是一张默认主题生成的封面,分屏的集成编辑器和实时预览就摆在同一屏里。集成编辑器左侧实时预览、右侧代码编辑打开slides.md把标题改掉,页面一秒内热更新。项目结构也很直白:slides.md是讲稿,components/放 Vue 组件,style.css是全局样式。要分享的时候,跑一次slidev export就能得到 PDF,各格式的参数见导出指南。去空目录里跑一遍npm run dev,随手改一行你的幻灯片,你就明白开发者为什么愿意换掉旧工具了。 更多语法细节,看官方文档。【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考