Markdown 幻灯片制作教程 — Marp、Slidev、Reveal.js 工具对比与使用指南

为什么用 Markdown 做幻灯片

如果你写过技术文档或者 README，大概率已经对 Markdown 很熟悉了。用 Markdown 来做演示文稿（presentation），核心好处就两个：文本可版本控制，写起来快。

传统做 PPT 的流程是打开 PowerPoint 或 Keynote，拖拽排版、调字体颜色、对齐元素……一套操作下来，内容没写多少，时间全花在"排版"上了。而 Markdown slides 的思路完全不同——你只需要关注内容本身，排版由工具自动处理。

说个实际的例子。有一次我要在团队内部做一个技术分享，涉及好几段代码。如果在 PowerPoint 里插入代码块，格式经常乱掉，拷贝过来缩进也容易出问题。换成 Marp 之后，我直接在 Markdown 里用代码围栏写代码，导出 PDF 就完事了，代码高亮、字体都是自动处理好的。整个过程从打开编辑器到导出 PDF，大概 20 分钟搞定。

当然，Markdown 做幻灯片也有局限性。如果你需要像素级的排版控制、复杂的图表布局、或者销售演示那种视觉冲击力，传统工具仍然是更好的选择。但对于技术分享、内部汇报、教学课件这类场景，markdown presentation 工具已经足够胜任了。

三大主流工具概览

目前社区里最主流的 markdown slides 工具有三个，各有侧重：

特性MarpSlidevReveal.js
定位Markdown 转换器Vue+Vite 幻灯片应用HTML 演示框架
学习成本最低中等较高
导出格式HTML/PDF/PPTX/图片HTML/PDFHTML/PDF
交互能力静态为主支持动画、Vue 组件支持插件、iframe 嵌入
适合场景简单汇报、快速出稿技术演讲、代码演示高度定制、学术报告
需要 Node.js不需要（CLI 可独立安装）需要需要

简单说：想最快出活选 Marp，想做酷炫演示选 Slidev，想要最大自由度选 Reveal.js。

下面逐个讲怎么用。

用 Marp 快速制作幻灯片

Marp 是三个工具里上手最简单的。它的核心理念就一句话：一个 .md 文件就是一套幻灯片。

安装 Marp

最方便的方式是装 VS Code 扩展——在 VS Code 扩展市场搜索 "Marp for VS Code" 直接安装就行。装完之后打开任意 .md 文件，右上角会出现 Marp 的预览图标，点一下就能实时预览幻灯片效果。

如果你更喜欢命令行，也可以装 Marp CLI：

# macOS
brew install marp-cli

# npm
npm install -g @marp-team/marp-cli

基本语法

Marp 用 --- 来分隔幻灯片页。在文件开头加上 marp: true 的 frontmatter 就能启用 Marp 模式：

---
marp: true
---

# 我的第一张幻灯片

这是用 Marp 做的演示文稿

---

# 第二页

- 列表项 1
- 列表项 2
- 列表项 3

就这么简单。每个 --- 之间就是一页幻灯片。

Marp 指令

Marp 通过 HTML 注释来添加排版指令。比如改页面布局、设置背景色：

---
marp: true
---

<!-- _class: lead -->

# 居中标题页

---

<!-- _paginate: true -->
<!-- _backgroundColor: #f0f0f0 -->

# 带页码的页面

这一页有浅灰背景，右下角显示页码。

常用的指令：

  • <!-- _class: lead --> — 内容居中（适合标题页）
  • <!-- _paginate: true --> — 显示页码
  • <!-- _backgroundColor: #xxx --> — 设置背景色
  • <!-- _color: #xxx --> — 设置文字颜色
  • <!-- _header: '文本' --> — 添加页眉
  • <!-- _footer: '文本' --> — 添加页脚

指令名前面带下划线（如 _class）表示只对当前页生效，不带下划线的对后续所有页面生效。

主题

Marp 内置了三个主题：default、gaia、uncover。在 frontmatter 里设置：

---
marp: true
theme: gaia
---

如果你需要自定义主题，可以写 CSS 文件。Marp 使用 Marpit 框架 的 CSS 语法，可以对幻灯片的各个区域（标题、正文、页眉页脚）进行精细控制。说实话，自定义主题这块的学习成本不低，如果你不是特别在意视觉风格，内置主题其实够用了。

导出

Marp 支持导出为 HTML、PDF、PPTX 和图片。在 VS Code 里点击导出按钮选格式就行，或者用命令行：

# 导出 PDF
marp slides.md --pdf

# 导出 PPTX
marp slides.md --pptx

# 导出 HTML（可以浏览器打开演示）
marp slides.md --html

导出 PPTX 这个功能挺实用的——虽然导出来的文件在 PowerPoint 里打开后样式可能需要微调，但至少文本、图片、布局都能保留。对于需要把幻灯片发给别人、或者需要用 PowerPoint 做最终润色的场景，这个功能省了不少事。

用 Slidev 做交互式演示

Slidev 是为开发者设计的幻灯片工具，基于 Vue 和 Vite 构建。它最大的优势是实时热更新和交互能力——写 Markdown 的同时就能在浏览器里看到效果，而且支持嵌入 Vue 组件。

安装和启动

# 创建一个 Slidev 项目
npm create slidev@latest

# 进入项目目录
cd slidev-project

# 启动开发服务器
npm run dev

启动后浏览器会自动打开 http://localhost:3030，左边是编辑器视图，右边是预览。你修改 Markdown 文件，预览会实时刷新。

基本语法

Slidev 同样用 --- 分页，但 frontmatter 更丰富：

---
theme: default
background: https://example.com/bg.jpg
class: text-center
---

# Slidev 演示

开发者友好的幻灯片工具

---

# 代码演示

```python
def hello():
    print("Hello, Slidev!")

动画效果

用 <v-click> 标签控制元素的出现时机

这段文字点击后才会显示

### Presenter 模式

Slidev 有一个我特别喜欢的功能——presenter mode。运行后访问 `http://localhost:3030/presenter`，你会得到一个双屏视图：一边是当前幻灯片，一边是下一张 + 演讲者备注。这个功能在做现场演示时太有用了，比 PowerPoint 的演示者视图还好用，因为它是浏览器里的，跨平台完全不挑系统。

### 导出

```bash
# 导出 PDF
npx slidev export

# 导出为静态 HTML（可部署到任意服务器）
npx slidev build

用 Reveal.js 做高度自定义幻灯片

Reveal.js 是一个 HTML 演示框架，Markdown 只是它支持的一种内容格式。它的优势在于最大的定制自由度和丰富的插件生态。

基本用法

Reveal.js 使用 HTML 文件加载 Markdown 内容：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/theme/black.css">
</head>
<body>
  <div class="reveal">
    <div class="reveal-slides">
      <section data-markdown>
        <textarea data-template>
          # 第一页
          Reveal.js 支持原生 Markdown

          ---

          ## 第二页
          用 `---` 分隔水平幻灯片
        </textarea>
      </section>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/markdown/markdown.js"></script>
  <script>
    Reveal.initialize({ plugins: [RevealMarkdown] });
  </script>
</body>
</html>

也可以加载外部 Markdown 文件：

<section data-markdown="slides.md"
         data-separator="---"
         data-separator-vertical="-->">
</section>

插件生态

Reveal.js 有不少实用插件，比如：

  • RevealMarkdown — Markdown 支持
  • RevealHighlight — 代码语法高亮
  • RevealMath — 数学公式渲染（KaTeX/MathJax）
  • RevealNotes — 演讲者备注
  • RevealZoom — 按住 Alt 点击缩放

此外社区还有不少第三方插件，支持实时协作、进度条、白板等功能。

不过说实话，Reveal.js 的上手门槛确实比 Marp 和 Slidev 高不少。你需要懂一些 HTML/CSS/JS，配置也相对繁琐。如果你只是想快速做个演示文稿，不建议从 Reveal.js 开始。

其他方案补充

除了上面三个主流工具，还有一些值得了解的方案：

Pandoc + Reveal.js：如果你已经安装了 Pandoc，可以直接一行命令把 Markdown 转成 Reveal.js 格式的 HTML：

pandoc slides.md -t revealjs -s -o presentation.html

这个方案的好处是不需要搭 Node.js 环境，只要装了 Pandoc 就能用。缺点是定制能力有限，本质上是用了 Reveal.js 的默认配置。

presenterm：一个用 Rust 写的终端幻灯片工具。如果你是终端党，喜欢在 Vim/Tmux 环境下工作，这个工具可以直接在终端里渲染 Markdown 幻灯片，不需要浏览器。不过它目前功能还比较基础，适合快速内部分享。

Quarto：Posit（原 RStudio）推出的出版系统，内置了 Reveal.js 支持，在学术圈用得比较多。如果你本来就在用 R Markdown 或者做数据科学报告，Quarto 是个不错的选择。

怎么选适合自己的工具

说到底，选择工具要看你的具体需求。我总结了一个简单的决策路径：

如果你只想用最短时间做出一套还不错的幻灯片，选 Marp。装个 VS Code 扩展就能开始写，导出 PDF 或者 PPTX 都很方便。对于 90% 的技术分享和内部汇报场景，Marp 完全够用。

如果你做的是技术演讲，需要展示代码、实时演示，选 Slidev。它的 presenter mode 和代码高亮体验真的很好，而且支持 Vue 组件意味着你可以在幻灯片里嵌入交互内容。代价是需要 Node.js 环境，学习成本也比 Marp 高一些。

如果你需要高度自定义，或者要做学术报告，选 Reveal.js。它的插件生态最成熟，可以嵌入各种外部内容（iframe、代码沙盒、数学公式），但需要你愿意花时间在 HTML/CSS 配置上。

还有一个实际的建议：不要纠结于"哪个工具最好"。我的习惯是用 Marp 做日常的快速出稿，需要做比较正式的技术演讲时切到 Slidev。工具只是手段，内容才是核心。

导出时的注意事项

不管用哪个工具，导出环节都有一些需要注意的地方：

PDF 导出：三个工具都支持，质量也都不错。Marp 的 PDF 导出最稳定，Slidev 和 Reveal.js 的 PDF 导出依赖浏览器打印，偶尔会有分页位置不理想的情况。

PPTX 导出：目前只有 Marp 原生支持导出为 .pptx 格式。如果你需要把幻灯片发给别人用 PowerPoint 编辑，Marp 是最省事的方案。不过导出后建议检查一下——复杂布局（比如多列）在 PowerPoint 里可能需要手动调整。

中文渲染问题：我在用 Marp 导出 PDF 时遇到过中文字体显示不完整的情况，特别是在 Linux 系统上。解决办法是在 Marp 的主题 CSS 里显式指定中文字体：

section {
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

这样导出时就能正确渲染中文了。说实话这个问题折腾了我一阵子，后来发现只要字体配好就没事了。

常见问题

Markdown 幻灯片能做动画吗？

Marp 本身不支持动画，导出的是静态页面。Slidev 和 Reveal.js 支持过渡动画和元素出现动画，但效果跟 PowerPoint 那种丰富的动画库还是没法比。如果你需要大量动画效果，可能不太适合用 Markdown 做幻灯片。

能不能在线协作编辑？

Slidev 本身没有内置协作功能。不过因为 Markdown 文件就是纯文本，你可以结合 Git + 任意在线编辑器（比如 GitHub Codespaces、VS Code Live Share）来实现协作。Reveal.js 有一个 Multiplex 插件，可以实现多设备同步演示（不是同步编辑）。

幻灯片里能插入视频吗？

Marp 支持通过 HTML 的 <video> 标签嵌入视频（在 HTML 导出模式下）。Slidev 和 Reveal.js 同样支持视频嵌入。但如果你导出为 PDF 或 PPTX，视频是无法嵌入的——这是所有 Markdown 幻灯片工具的共同局限。

参考来源

  1. Marp 官方文档 — Marp 工具链概览与使用说明
  2. Slidev 官方文档 — Slidev 功能介绍与 API 参考
  3. Reveal.js Markdown 文档 — Reveal.js 的 Markdown 支持配置
  4. Marpit 框架文档 — Marp 底层的 CSS 主题框架
  5. Slidev vs Marp vs Reveal.js 对比 — 2026 年三工具横向对比分析
Edward Wang