Slidev (slide + dev, /slʌɪdɪv/) 是基于 Web 的幻灯片制作和演示工具。
提起幻灯片制作工具，大家都会想到PowerPoint 或 Keynote，它们在制作带有复杂动画和图表等方面效果相当好。今天为大家介绍一款开发者友好的演示文稿工具------Slidev
Slidev 并不寻求完全取代其他幻灯片制作工具。相反，它专注于迎合开发者社区的需求。 通过分离内容和视觉效果使你能够一次专注于一件事：专注于分享你的想法、用充分的内容和效果去支撑的创意。同时拥有支持 HTML 和 Vue 组件的能力，并且能够呈现像素级完美的布局，还在你的演讲稿中内置了互动的演示样例，只需一些代码就能产出效果炸裂的演示稿。它还拥有很多内置的集成功能，如实时编码、导出、演讲录制等。
Slidev 是由 web 驱动的，因此你可以使用它进行任何操作 ------ 具有无限的可能性。
功能特点
- 📝 Markdown 支持 ------ 使用你最喜欢的编辑器和工作流编写 Markdown 文件
- 🧑💻 开发者友好 ------ 内置代码高亮、实时编码等功能
- 🎨 可定制主题 ------ 以 npm 包的形式共享、使用主题
- 🌈 灵活样式 ------ 使用 Windi CSS 按需使用的实用类和 UnoCSS
- 🤹 可交互 ------ 无缝嵌入 Vue 组件
- 🎙 演讲者模式 ------ 可以使用另一个窗口，甚至是你的手机来控制幻灯片
- 🎨 绘图 - 在你的幻灯片上进行绘图和批注
- 🧮 LaTeX 支持 ------ 内置了对 LaTeX 数学公式的支持
- 📰 图表支持 ------ 使用文本描述语言创建图表
- 🌟 图标 ------ 能够直接从任意图标库中获取图标
- 💻 编辑器 ------ 集成的编辑器，或者使用 VS Code 扩展
- 🎥 演讲录制 ------ 内置录制功能和摄像头视图
- 📤 跨平台 ------ 能够导出 PDF、PNG 文件，甚至是一个可以托管的单页应用
- ⚡️ 快速 ------ 基于 Vite 的即时重载
- 🛠 可配置 ------ 支持使用 Vite 插件、Vue 组件以及任何的 npm 包
演示功能
- 导航功能说明
- 演讲录制
基于 RecordRTC 与 WebRTC API技术。Slidev 拥有内置的演讲录制和摄像头视图。你可以使用它们轻松实现你的演讲录制
点击导航面板上的演讲录制按钮，将会弹出一个对话框。在此对话框中，你可以选择将你的摄像头视图嵌入到幻灯片中进行录制，也可以将它们分成两个视频文件。
- 演讲者模式
点击导航面板上的进入演讲者模式按钮，或者手动访问 http://localhost:3030/presenter 地址，即可进入演讲者模式。每当你进入演示者模式，其他页面实例会自动与演示者保持同步。
-
演讲备注
你也可以为每张幻灯片编写备注。它们将展示在 演讲者模式 中，供你在演示时参考。在 Markdown 中，每张幻灯片中的最后一个注释块将被视为备注。
-
计时功能
-
绘图批注
Slidev基于 drauu 实现了绘图和批注的功能，可用进一步增强你的演示效果。你可以通过点击工具栏上的批注图标来启用。你创建的绘图和批注都会实时自动同步起来。如果想对绘图进行持久化？只需在frontmatter 中的配置:
md
---
drawings:
persist: true
---就可以把你得到绘图作为 SVG 保存在 .slidev/drawings 目录下，并把它们放入你导出的 pdf 或者部署的网站中。
内置功能
- 丰富的布局
内置布局丰富，支持center cover two-cols two-cols-header image-right|right iframe-right|left 等，也支持自定义布局。
- 可使用扩展插件
扩展插件是你可以在演示文稿中使用的附加组件、布局、样式、配置等集。
- 它们不影响幻灯片的全局样式
- 你可以在同一演示文稿中使用多个插件
- 集成Monaco 编辑器
当你需要在演示文稿中做修改时，只需在语言 id 后添加 {monaco} ------ 即可将该代码块变为一个功能齐全的 Monaco 编辑器。
技术分享中你应该会有这样的场景：针对之前代码做了优化，你需要做个算法演示；在PPT中你截两张图展示修改前后，再在ide中运行代码展示性能的提升；如果你用
Slidev以下两个功能着实可以让你的演讲分享效果提升一大截：
- diff功能：类似git diff，直观地展示变更了那些行
- Runner：直接在演示文稿中运行代码
- 动画
- 点击动画
- 高亮和标记
- Motion
- Magic-Move
- 图标
Slidev基于unplugin-icons 和 Iconify技术，你可以在 Markdown 中在安装对应包后访问几乎所有的开源的图标集。图标 ID 遵循 Iconify 的命名规则 {collection-name}-{icon-name}
- 组件支持
- 导出
可将演示文稿或者标注导出为 PDF 或 PNG 的功能，基于这个功能我可以将我的公众号文章生成小绿（红）书的图片格式，发布到小绿（红）书；
这篇合集中的第二篇图文就是使用导出功能生成的，也可以自定义导出的尺寸，具体参数小绿书版本会详细说明。
shell
slidev export { path/to/file.md } --format png --dark项目信息
Slidev项目是由著名的开源开发者Anthony Fu主导开发的，项目质量很高迭代很快，有兴趣的可以尝试。
目前Slidev还未发布1.0版本（还是beta版本），在使用过程会出现一些问题和报错；建议使用以下命令进行安装使用进行尝试，会在目录里安装依赖（建议node > 18）实用起来会稳定很多。
shell
npm init slidev // 初始化工作目录
cd slidev
npm run dev // 启动演示，默认展示 slides.md