快速上手

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

TIP

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

创建幻灯片

在浏览器中创建

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

在本地创建

需要先安装 Node.js >= 18.0

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

npm

npm init slidev@latest

pnpm

pnpm create slidev

yarn

yarn create slidev

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

单文件模式 (不推荐)

如果你不想创建一个 Node.js 包来管理你的幻灯片，可以选择全局安装 Slidev CLI:

npm

npm i -g @slidev/cli

pnpm

pnpm i -g @slidev/cli

yarn

yarn global add @slidev/cli

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

slidev slides.md

基本命令

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

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

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

{
  "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.js 插件

加入社区

欢迎加入我们的 Discord 服务器，获取帮助、分享你的幻灯片，或者讨论关于 Slidev 的任何事情。

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

技术栈

Slidev 基于以下工具和技术构建：

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