Back

如何使用 Markdown 和 Slidev 编写演示文稿

OpenReplay Team

Jan 6, 2026 · 2 min read

构建演示文稿不应该让你从开发工作流中切换出来。然而,传统工具强迫你使用拖放界面、专有格式,并带来版本控制的噩梦。Slidev 提供了一种不同的方法:基于 Markdown 的幻灯片,背后是你已经在使用的前端工具链。

本文介绍了 Slidev 演示文稿的核心工作流程——从编写到导出——并解释了为什么它吸引那些希望将幻灯片纳入版本控制的开发者。

核心要点

Slidev 是一个由 Vite 驱动的 Vue 3 应用程序,使用 Markdown 作为创建演示文稿的主要输入格式
幻灯片通过 --- 分隔,并在 slides.md 文件中通过 YAML frontmatter 进行配置
Vue 组件可以直接嵌入 Markdown 中,实现交互性、动画和图表
导出选项包括 PDF、PNG、PPTX 和可部署的单页应用程序
版本控制、可扩展性和工作流对齐使 Slidev 成为前端开发者的理想选择

Slidev 与其他演示工具的区别

Slidev 不仅仅是一个幻灯片生成器。它是一个由 Vite 驱动的 Vue 3 应用程序,将 Markdown 作为主要输入格式。这种区别很重要,因为你可以获得现代前端工具的全部能力:开发期间的热模块替换、基于组件的架构,以及插件生态系统。

与 PowerPoint 或 Google Slides 不同,你的演示文稿以纯文本文件的形式存在。与 Reveal.js 等较旧的工具不同,Slidev 直接与 Vue 生态系统集成。当你需要超越静态幻灯片的交互性时,可以将 Vue 组件直接放入 Markdown 中。

结果是对前端开发者来说感觉原生的演示文稿。你现有的 CSS、JavaScript 和组件架构知识可以直接迁移。

Slidev 演示文稿的核心工作流程

在 Markdown 中编写幻灯片

Slidev 项目以 slides.md 文件为中心。每张幻灯片用 --- 分隔,你可以通过 YAML frontmatter 配置单个幻灯片或整个演示文稿。

---
theme: default
---

# Welcome

Your first slide content here.

---

# Second Slide

- Bullet points work as expected
- So does **bold** and *italic* text

标准 Markdown 语法处理大部分内容:标题、列表、链接和图片。代码块会自动获得语法高亮。当你需要 Markdown 无法表达的内容时,可以内联编写 HTML 或 Vue 组件。

运行开发服务器

CLI 启动一个带有热重载的本地开发服务器。编辑你的 Markdown 文件,浏览器会立即更新。演讲者视图显示当前幻灯片、下一张幻灯片和演讲者备注,可通过单独的演讲者视图 URL 访问。

这种紧密的反馈循环使迭代变得快速。你不需要等待导出或重新构建。

组织大型演示文稿

对于大型演示文稿,可以将内容拆分到多个文件中。frontmatter 中的 src 属性导入外部 Markdown 文件:

---
src: ./slides/introduction.md
---

---
src: ./slides/main-content.md
---

这种模式使单个文件保持可管理的大小,并允许你通过移动导入语句来重新排序章节。

使用 Vue 组件扩展幻灯片

当你需要的不仅仅是静态内容时,Slidev 的前端工具就会大放异彩。任何 Vue 组件都可以在 Markdown 中使用——无论是来自主题、第三方包,还是你自己的 components/ 目录。

常见用例包括:

点击动画:v-click 指令逐步显示内容
图表:内置的 Mermaid 支持从文本渲染流程图和序列图
实时代码:Monaco 编辑器嵌入允许在演示期间进行实时代码编辑
自定义布局:将可重用的幻灯片模板构建为 Vue 组件

你不局限于工具开箱即用提供的功能。

导出和分享演示文稿

导出是一流的功能,而不是事后的补充。Slidev 生成:

PDF:用于离线分享或打印
PNG:单独的幻灯片图片
PPTX:当有人坚持要 PowerPoint 时
SPA:可以部署到任何地方的静态单页应用程序

SPA 导出值得关注。将其部署到 Vercel、Netlify 或 GitHub Pages,你的演示文稿就变成了一个可分享的 URL。结合 CI/CD 管道,每次提交到仓库都会产生一个新的部署。

为什么前端开发者选择 Slidev

吸引力归结为工作流对齐:

版本控制:对幻灯片进行差异比较,在拉取请求中审查更改,并维护历史记录
重用现有技能:CSS、Vue 和 JavaScript 完全按预期工作
可扩展性:主题和插件遵循 npm 约定
可定制性:通过标准 Web 技术覆盖任何内容

如果你熟悉 Markdown 和现代 JavaScript 工具,Slidev 会减少摩擦而不是增加摩擦。

入门指南

通过 Slidev CLI 使用你喜欢的包管理器初始化一个新项目:

npm init slidev@latest

脚手架项目包含演示核心功能的示例幻灯片。从那里开始,用你自己的内容替换示例内容并运行开发服务器。

官方文档涵盖语法细节、主题安装和高级配置。从简单开始——使用默认样式的 Markdown 内容——然后根据需要添加组件和自定义。

结论

Slidev 将演示文稿转变为可维护的、代码优先的工作流程。通过将幻灯片视为由 Vue 和 Vite 驱动的 Markdown 文件,它与前端开发者已有的工作方式保持一致。版本控制变得自然,自定义使用熟悉的 Web 技术,导出选项涵盖每个分享场景。你的幻灯片应该拥有与你的应用程序相同的工具。

常见问题

可以。基本的演示文稿只需要 Markdown 知识。Vue 组件是可选的,只有当你需要交互性(如动画或实时代码演示)时才需要。你可以仅使用 Markdown 语法创建完整的演示文稿,包括文本、列表、图片和代码块。

使用 Markdown 中的 HTML 注释添加演讲者备注。将你的备注放在幻灯片内容下方的注释标签内。这些备注会出现在演讲者视图中,但在演示期间对观众隐藏。

可以。SPA 导出生成静态文件,你可以将其托管在任何地方,包括 GitHub Pages、Netlify 或 Vercel。不需要服务器端处理。导出的文件作为独立的 Web 应用程序工作,完全在浏览器中运行。

支持。Slidev 使用 Shiki 进行语法高亮,开箱即用支持 100 多种编程语言。你还可以启用行高亮、行号,以及 Monaco 编辑器集成,以便直接在幻灯片中进行实时代码编辑。

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.