开始使用

Slidev ^{(slide + dev, /slʌɪdɪv/)} 是基于 Web 的幻灯片制作和演示工具。它旨在让开发者专注在 Markdown 中编写内容，同时拥有支持 HTML 和 Vue 组件的能力，并且能够呈现像素级完美的布局，还在你的演讲稿中内置了互动的演示样例。

它使用了功能丰富的 markdown 文件来生成精美的幻灯片，具有即时重载的体验。它还拥有很多内置的集成功能，如实时编码、导出 PDF、演讲录制等。由于 Slidev 是由 web 驱动的，因此你可以使用它进行任何操作 —— 具有无限的可能性。

你可以在 为什么选 Slidev 部分了解更多关于本项目的设计初衷。

功能

• 📝 Markdown 支持 —— 使用你最喜欢的编辑器和工作流编写 Markdown 文件
• 🧑‍💻 开发者友好 —— 内置代码高亮、实时编码等功能
• 🎨 可定制主题 —— 以 npm 包的形式共享、使用主题
• 🌈 灵活样式 —— 使用 Windi CSS 按需使用的实用类和 UnoCSS
• 🤹 可交互 —— 无缝嵌入 Vue 组件
• 🎙 演讲者模式 —— 可以使用另一个窗口，甚至是你的手机来控制幻灯片
• 🎨 绘图 - 在你的幻灯片上进行绘图和批注
• 🧮 LaTeX 支持 —— 内置了对 LaTeX 数学公式的支持
• 📰 图表支持 —— 使用文本描述语言创建图表
• 🌟 图标 —— 能够直接从任意图标库中获取图标
• 💻 编辑器 —— 集成的编辑器，或者使用 VS Code 扩展
• 🎥 演讲录制 —— 内置录制功能和摄像头视图
• 📤 跨平台 —— 能够导出 PDF、PNG 文件，甚至是一个可以托管的单页应用
• ⚡️ 快速 —— 基于 Vite 的即时重载
• 🛠 可配置 —— 支持使用 Vite 插件、Vue 组件以及任何的 npm 包

搭建你的第一个演讲稿

在线试用

sli.dev/new

本地创建

npm

npm init slidev@latest

yarn

yarn create slidev

pnpm

pnpm create slidev

根据提示开始创建你的幻灯片吧！想要了解更多关于 Markdown 的语法，请阅读 语法指南。

命令行界面

在安装了 Slidev 的项目里，你可以在你的 npm scripts 里使用 slidev 命令。

{
  "scripts": {
    "dev": "slidev", //  启动 dev server
    "build": "slidev build", // 构建生产环境的单页面应用
    "export": "slidev export" // 将幻灯片导出为 pdf 格式
  }
}

或者，你也可以使用 npx

$ npx slidev

执行 slidev --help 命令获取更多选项的详细信息。

Markdown 语法

Slidev 会读取位于项目根目录的 slides.md 文件，并将其转换为幻灯片。每当你修改 Markdown 文件，幻灯片的内容都会立刻随之更新。例如：

# Slidev

Hello World

---

# 第 2 页

直接使用代码块，能够实现代码高亮

```ts
console.log('Hello, World!')
```

---

# 第 3 页

请阅读 语法指南 获取更多关于 Slidev Markdown 语法的内容。

技术栈

Slidev 使用了如下的工具和技术：

• Vite —— 一款极速的前端工具
• 基于 Vue 3 的 Markdown —— 专注内容的同时，具备 HTML 和 Vue 组件的能力
• Windi CSS 或 UnoCSS —— 按需、实用类优先的 CSS 框架，轻松定制你的幻灯片样式
• Prism, Shiki, Monaco Editor —— 具有实时编码能力的一流代码片段支持
• RecordRTC —— 内置录制功能和摄像头视图
• VueUse 家族 —— @vueuse/core、@vueuse/head、@vueuse/motion 等
• Iconify —— 图标库集合
• Drauu - 支持绘图和批注
• KaTeX —— LaTeX 数学渲染
• Mermaid —— 文本描述语言创建图表