Markdown 投影片製作教學 — Marp、Slidev、Reveal.js 工具比較與使用指南

為什麼用 Markdown 做投影片

如果你寫過技術文件或 README，應該已經對 Markdown 很熟悉了。用 Markdown 來做簡報（presentation），核心好處就兩個：文字可版本控制，寫起來快。

傳統做簡報的流程是打開 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> 標籤控制元素的出現時機

這段文字點擊後才會顯示

### 簡報者模式

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