Slidev

面向开发人员的 演示幻灯片🧑‍💻👩‍💻👨‍💻

文档

特征

• 📝 基于 Markdown - 使用您喜欢的编辑器和工作流程
• 🧑‍💻 开发人员友好- 内置语法突出显示、实时编码等。
• 🎨 Themable - 主题可以与 npm 包共享和使用。
• 🌈 通过Windi CSS或UnoCSS提供的时尚按需实用程序。
• 🤹 交互式- 无缝嵌入 Vue 组件。
• 🎙 演示者模式- 使用另一个窗口，甚至您的手机来控制您的幻灯片。
• 🧮 LaTeX - 内置 LaTeX 数学方程支持。
• 📰 图表- 创建带有文本描述的图表
• 🌟 图标- 直接从任何图标集中访问图标。
• 💻 Editors - 集成编辑器，或VS Code 的扩展
• 🎥 录制- 内置录制和摄像头视图。
• 📤 便携- 导出为 PDF、PNG，甚至是可托管的 SPA。
• ⚡️ 由Vite提供支持的快速即时重新加载。
• 🛠 Hackable - 使用 Vite 插件、Vue 组件或任何 npm 包。

入门

在线试用⚡️

sli.dev/new

本地初始化项目

安装Node.js >=14并运行以下命令：

npm init slidev

文档： English |中文文档| 法语| 西班牙语| Русский | 葡萄牙语-BR

不和谐：chat.sli.dev

完整的例子可以查看demo文件夹，也是我之前演讲的源文件。

技术栈

• Vite - 一个非常快速的前端工具
• Vue 3支持的Markdown - 专注于内容，同时在需要时拥有 HTML 和 Vue 组件的强大功能
• Windi CSS / UnoCSS - 按需实用程序优先的 CSS 框架，轻松设置幻灯片样式
• Prism , Shiki , Monaco Editor - 一流的代码片段支持和实时编码能力
• RecordRTC - 内置录制和摄像头视图
• Vue 使用族 - @vueuse/core, @vueuse/head,@vueuse/motion等。
• Iconify - Iconsets 集合。
• Drauu - 绘图和注释支持
• KaTeX - LaTeX 数学渲染。
• Mermaid- 文字图表。