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

视频预览 | 文档

特性

• 📝 基于 Markdown - 专注于内容，使用你喜欢的编辑器
• 🧑‍💻 对开发者友好 - 内置代码高亮、实时编码等
• 🎨 可定制主题 - 主题可以共享并通过 npm 包使用
• 🌈 时尚 - 通过 UnoCSS 按需使用工具类
• 🤹 交互式 - 无缝嵌入 Vue 组件
• 🎙 演讲者模式 - 使用另一个窗口，甚至你的手机来控制幻灯片
• 🎨 绘图 - 在幻灯片上绘制和注释
• 🧮 LaTeX - 内置 LaTeX 数学公式支持
• 📰 图表 - 使用文本描述通过 Mermaid 创建图表
• 🌟 图标 - 直接访问任何图标集中的图标
• 💻 编辑器 - 集成编辑器，或 VSCode 扩展
• 🎥 录制 - 内置录制和摄像头视图
• 📤 便携 - 导出为 PDF、PNG 或 PPTX
• ⚡️ 快速 - 由 Vite 驱动的即时重新加载
• 🛠 可定制 - 使用 Vite 插件、Vue 组件或任何 npm 包

快速开始

在线试用 ⚡️

sli.dev/new

在本地初始化项目

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

npm init slidev

Documentation: English | 中文文档 | Français | Español | Русский | Português-BR

Discord: chat.sli.dev

For a full example, you can check the demo folder, which is also the source file for my previous talk.

Tech Stack

• Vite - An extremely fast frontend tooling
• Vue 3 powered Markdown - Focus on the content while having the power of HTML and Vue components whenever needed
• UnoCSS - On-demand utility-first CSS engine, style your slides at ease
• Shiki, Monaco Editor - First-class code snippets support with live coding capability
• RecordRTC - Built-in recording and camera view
• VueUse family - @vueuse/core, @vueuse/motion, etc.
• Iconify - Icon sets collection.
• Drauu - Drawing and annotations support
• KaTeX - LaTeX math rendering.
• Mermaid - Textual Diagrams.

Sponsors

This project is made possible by all the sponsors supporting my work:

许可证

MIT 许可证 © 2021 Anthony Fu