slidev - 为开发者打造的演示文稿工具

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 包

演示功能

1. 导航功能说明

2. 演讲录制

基于 RecordRTC 与 WebRTC API技术。Slidev 拥有内置的演讲录制和摄像头视图。你可以使用它们轻松实现你的演讲录制

点击导航面板上的演讲录制按钮，将会弹出一个对话框。在此对话框中，你可以选择将你的摄像头视图嵌入到幻灯片中进行录制，也可以将它们分成两个视频文件。

4. 演讲者模式

点击导航面板上的进入演讲者模式按钮，或者手动访问 http://localhost:3030/presenter 地址，即可进入演讲者模式。每当你进入演示者模式，其他页面实例会自动与演示者保持同步。

• 演讲备注

  你也可以为每张幻灯片编写备注。它们将展示在 演讲者模式 中，供你在演示时参考。在 Markdown 中，每张幻灯片中的最后一个注释块将被视为备注。

• 计时功能

• 绘图批注
  Slidev基于 drauu 实现了绘图和批注的功能，可用进一步增强你的演示效果。你可以通过点击工具栏上的批注图标来启用。你创建的绘图和批注都会实时自动同步起来。

  如果想对绘图进行持久化？只需在frontmatter 中的配置:

---
drawings:
  persist: true
---

就可以把你得到绘图作为 SVG 保存在 .slidev/drawings 目录下，并把它们放入你导出的 pdf 或者部署的网站中。

内置功能

1. 丰富的布局

内置布局丰富，支持center cover two-cols two-cols-header image-right|right iframe-right|left 等，也支持自定义布局。

2. 可使用扩展插件

扩展插件是你可以在演示文稿中使用的附加组件、布局、样式、配置等集。

• 它们不影响幻灯片的全局样式
• 你可以在同一演示文稿中使用多个插件

3. 集成Monaco 编辑器

当你需要在演示文稿中做修改时，只需在语言 id 后添加 {monaco} —— 即可将该代码块变为一个功能齐全的 Monaco 编辑器。

技术分享中你应该会有这样的场景：针对之前代码做了优化，你需要做个算法演示；在PPT中你截两张图展示修改前后，再在ide中运行代码展示性能的提升；如果你用Slidev以下两个功能着实可以让你的演讲分享效果提升一大截：

• diff功能：类似git diff，直观地展示变更了那些行
• Runner：直接在演示文稿中运行代码

4. 动画

   1. 点击动画
   2. 高亮和标记
   3. Motion
   4. Magic-Move

5. 图标

 Slidev基于unplugin-icons 和 Iconify技术，你可以在 Markdown 中在安装对应包后访问几乎所有的开源的图标集。图标 ID 遵循 Iconify 的命名规则 {collection-name}-{icon-name}

6. 组件支持

7. 导出

可将演示文稿或者标注导出为 PDF 或 PNG 的功能，基于这个功能我可以将我的公众号文章生成小绿（红）书的图片格式，发布到小绿（红）书；

这篇合集中的第二篇图文就是使用导出功能生成的，也可以自定义导出的尺寸，具体参数小绿书版本会详细说明。

slidev export { path/to/file.md } --format png --dark

项目信息

Slidev项目是由著名的开源开发者Anthony Fu主导开发的，项目质量很高迭代很快，有兴趣的可以尝试。

目前Slidev还未发布1.0版本（还是beta版本），在使用过程会出现一些问题和报错；建议使用以下命令进行安装使用进行尝试，会在目录里安装依赖（建议node > 18）实用起来会稳定很多。

npm init slidev // 初始化工作目录
cd slidev
npm run dev // 启动演示，默认展示 slides.md

本文由mdnice多平台发布