Slidev 简介

Slidev（读音 /slaɪdɪv/，由 slide + dev 组合而来）是一个基于 Web 的幻灯片制作与演示工具，专为开发者设计，让你专注于使用 Markdown 编写内容。借助 Vue 等 Web 技术，你可以为演示文稿提供像素级完美的设计以及可交互的演示。

创建幻灯片

在线尝试

你可以直接在浏览器中通过 StackBlitz 启动 Slidev：访问 sli.dev/new 即可开始。

本地创建

本地创建需要安装 Node.js >= 20.12.0。运行以下命令在本地新建 Slidev 项目：

# 如果尚未安装 pnpm
npm i -g pnpm
pnpm create slidev

根据提示启动幻灯片项目，幻灯片内容位于 slides.md 文件中，初始内容包含了多数 Slidev 功能的演示。关于 Markdown 语法的更多信息，可查阅语法指南。

注：也支持单文件使用方式（但不推荐）。

基本命令

Slidev 在 CLI 中提供了一组命令，常用命令如下：

• slidev：启动开发服务器（详见 dev 命令）
• slidev export：将幻灯片导出为 PDF、PPTX 或 PNG（详见导出指南）
• slidev build：将幻灯片构建为静态 Web 应用（详见托管指南）
• 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 插件：使用 Prettier 格式化幻灯片

社区与技术支持

推荐加入官方 Discord 服务器以获取帮助、分享幻灯片或讨论 Slidev。如果遇到 Bug，可在 GitHub 上提交 issue。

技术栈

Slidev 由以下工具和技术构建：

• Vite：极快的前端工具链
• Vue 3 驱动的 Markdown：专注内容，按需使用 HTML 和 Vue 组件
• UnoCSS：按需原子化 CSS 框架，轻松样式化幻灯片
• Shiki、Monaco Editor：一流的代码片段支持与实时编码能力
• RecordRTC：内置录制与摄像头视图
• VueUse 系列：@vueuse/core、@vueuse/head、@vueuse/motion 等
• Iconify：图标集集合
• Drauu：绘图与标注支持
• KaTeX：LaTeX 数学公式渲染
• Mermaid：文本化图表

适用场景

Slidev 适合开发者在编写技术分享、会议演讲、教学课件等演示内容时，使用熟悉的 Markdown 工作流，结合 Web 技术快速制作兼具美观与交互性的幻灯片。