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. 导航功能说明

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

  1. 演讲录制

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

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

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

  1. 演讲者模式

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

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

  • 演讲备注

    你也可以为每张幻灯片编写备注。它们将展示在 演讲者模式 中,供你在演示时参考。在 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 等,也支持自定义布局。

  1. 可使用扩展插件

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

  • 它们不影响幻灯片的全局样式
  • 你可以在同一演示文稿中使用多个插件
  1. 集成Monaco 编辑器

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

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

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

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

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

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

  1. 图标

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

  1. 组件支持

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

  1. 导出

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

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

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

项目信息

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

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

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

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

原文链接:https://juejin.cn/post/7348277249722122274 作者:埃兰德欧神

(0)
上一篇 2024年3月20日 下午4:22
下一篇 2024年3月20日 下午4:33

相关推荐

发表评论

登录后才能评论