快速开始

Slidev ^{(slide + dev, /slaɪdɪv/)} 是一个为开发者设计的基于 Web 的幻灯片制作工具。它帮助您以 Markdown 的形式专注于编写幻灯片的内容，并制作出具有交互式演示功能的、高度可自定义的幻灯片。

TIP

你可以在 📖 为什么选择 Slidev 中了解更多关于本项目的设计理念。

创建幻灯片

在浏览器中创建

通过 StackBlitz 在浏览器中创建幻灯片: sli.dev/new

在本地创建

需要先安装 Node.js >= 22.0

在终端运行以下命令来创建一个新的 Slidev 项目：

pnpm

# 如果你还没有安装 pnpm
npm i -g pnpm

pnpm create slidev

npm

# 不推荐 -
# NPM 每次创建新项目时都会重新下载包，
# 速度较慢且占用大量空间

npm init slidev@latest

yarn

yarn create slidev

bun

bun create slidev

deno

deno init --npm slidev

根据指引，输入项目名称并按照提示完成项目创建。幻灯片内容在 slides.md 文件中，初始内容包含了 Slidev 的大部分功能的演示。关于幻灯片 Markdown 语法的更多信息，请查看 📖 语法指南。

单文件模式 (不推荐)

如果你希望使用单个 Markdown 文件作为幻灯片，可以全局安装 Slidev CLI：

pnpm

pnpm i -g @slidev/cli

npm

npm i -g @slidev/cli

yarn

yarn global add @slidev/cli

bun

bun i -g @slidev/cli

deno

deno i -g npm:@slidev/cli

然后，你可以通过以下命令创建并启动幻灯片:

slidev slides.md

基本命令

以下是 Slidev CLI 的一些常用命令：

• slidev - 启动开发服务器。细节请参见 dev 命令
• slidev export - 将幻灯片导出为 PDF、PPTX 或 PNG 文件。细节请参见 📖 导出
• slidev build - 将幻灯片构建为静态网页。细节请参见 📖 部署
• slidev format - 将幻灯片格式化。细节请参见 format 命令
• slidev --help - 显示帮助信息

你可以将这些命令添加到你的 package.json 的 scripts 字段中，来更方便地运行它们（如果幻灯片项目是通过 npm init slidev 创建的，则可以跳过这一步）：

package.json

{
  "scripts": {
    "dev": "slidev --open",
    "build": "slidev build",
    "export": "slidev export"
  }
}

这样，你就可以通过 npm run dev、npm run build 和 npm run export 来运行这些命令了。

关于 CLI 的更多信息，请查看 CLI 指南。

设置编辑器

由于 Slidev 使用 Markdown 作为源文件，你可以使用任何你喜欢的编辑器来创建幻灯片。我们还提供了一些工具来帮助你更方便地编辑幻灯片：

✨ VS Code 扩展

✨ 集成编辑器

✨ Prettier 插件

加入社区

推荐加入我们的官方 Discord 服务器 获取帮助、分享你的幻灯片，或讨论任何关于 Slidev 的话题。

如果你遇到了疑似 bug 的问题，欢迎在 GitHub 上开一个 issue。

也欢迎中文社区的朋友们加入我们的（半官方）QQ 群 978643067，讨论 Slidev 相关话题。

技术栈

Slidev 由以下工具和技术驱动：

• Vite - 一款极速响应的下一代的前端工具链
• Vue 3 powered Markdown - 用于编写幻灯片内容
• UnoCSS - 帮助快速构建幻灯片样式
• Shiki, Monaco Editor - 为在幻灯片中嵌入代码提供一流支持
• RecordRTC - 内置的录制工具和摄像头视图
• VueUse 系列 - @vueuse/core, @vueuse/head, @vueuse/motion, 等等
• Iconify - 用图标集丰富你的幻灯片
• Drauu - 用于在幻灯片上绘图和批注
• KaTeX - 用于渲染 LaTeX 数学公式
• Mermaid - 基于文本的图表绘制工具