slidev

Slidev - 開發者專用的簡報投影片工具

基於 Vite、Vue 和 Markdown 建置的網頁式簡報製作工具。

使用時機

• 包含即時程式碼範例的技術簡報或投影片
• 帶有動畫效果的語法高亮程式碼片段
• 互動式 Demo（Monaco 編輯器、可執行程式碼）
• 數學公式（LaTeX）或圖表（Mermaid、PlantUML）
• 搭配講者備忘錄錄製簡報
• 匯出為 PDF、PPTX，或部署為單頁應用程式（SPA）
• 用於開發者演講或工作坊的程式碼導覽

快速開始

pnpm create slidev    # 建立專案
pnpm run dev          # 啟動開發伺服器（預設開啟 http://localhost:3030）
pnpm run build        # 建置靜態 SPA
pnpm run export       # 匯出為 PDF（需要 playwright-chromium）

驗證：執行 pnpm run dev 後，確認投影片能正常於 http://localhost:3030 載入。執行 pnpm run export 後，檢查專案根目錄中是否已產生 PDF 檔。

基本語法

---
theme: default
title: My Presentation
---

# 第一張投影片

這裡填入內容

---

# 第二張投影片

更多內容

<!--
這裡填入講者備忘錄
-->

• --- 用於分隔投影片
• 第一個 Frontmatter 為 Headmatter（整份簡報的全域設定）
• HTML 註解即為講者備忘錄

核心參考指南

主題	說明	參考檔案
Markdown 語法	投影片分隔符、Frontmatter、備忘錄、程式碼區塊	core-syntax
動畫效果	v-click、v-clicks、Motion 動作、轉場效果	core-animations
Headmatter	簡報層級的全域設定選項	core-headmatter
Frontmatter	單張投影片的設定選項	core-frontmatter
CLI 指令	開發、建置、匯出、主題相關指令	core-cli
元件	內建 Vue 元件	core-components
版面配置	內建投影片版面配置	core-layouts
匯出功能	PDF、PPTX、PNG 匯出選項	core-exporting
託管與部署	建置並部署至各式平台	core-hosting
全域上下文	$nav、$slidev、Composables API	core-global-context

功能參考

程式碼與編輯器

功能	用法	參考檔案
行高亮	```ts {2,3}	code-line-highlighting
點擊分步高亮	```ts {1|2-3|all}	code-line-highlighting
行號顯示	lineNumbers: true 或 {lines:true}	code-line-numbers
捲動式程式碼區塊	{maxHeight:'100px'}	code-max-height
程式碼頁籤	::code-group（需設定 comark: true）	code-groups
Monaco 編輯器	```ts {monaco}	editor-monaco
執行程式碼	```ts {monaco-run}	editor-monaco-run
編輯檔案	<<< ./file.ts {monaco-write}	editor-monaco-write
程式碼變換動畫	````md magic-move	code-magic-move
TypeScript 型別提示	```ts twoslash	code-twoslash
匯入程式碼片段	<<< @/snippets/file.js	code-import-snippet

圖表與數學公式

功能	用法	參考檔案
Mermaid 圖表	```mermaid	diagram-mermaid
PlantUML 圖表	```plantuml	diagram-plantuml
LaTeX 數學公式	$inline$ 或 $$block$$	diagram-latex

版面配置與樣式

功能	用法	參考檔案
畫布尺寸	canvasWidth, aspectRatio	layout-canvas-size
投影片縮放	zoom: 0.8	layout-zoom
縮放元素	<Transform :scale="0.5">	layout-transform
版面配置插槽	::right::, ::default::	layout-slots
區域 CSS (Scoped)	投影片內的 <style>	style-scoped
全域圖層	global-top.vue, global-bottom.vue	layout-global-layers
可拖拉元素	v-drag, <v-drag>	layout-draggable
圖示	<mdi-icon-name />	style-icons

動畫與互動

功能	用法	參考檔案
點擊動畫	v-click, <v-clicks>	core-animations
手繪風標記 (Rough)	v-mark.underline, v-mark.circle	animation-rough-marker
畫筆模式	按下 C 鍵或設定 drawings:	animation-drawing
方向樣式	forward:delay-300	style-direction
備忘錄標記高亮	備忘錄中的 [click]	animation-click-marker

語法擴充

功能	用法	參考檔案
Comark 語法	comark: true + {style="color:red"}	syntax-comark
區塊 Frontmatter	使用 ```yaml 代替 ---	syntax-block-frontmatter
匯入投影片	src: ./other.md	syntax-importing-slides
合併 Frontmatter	以主入口設定優先	syntax-frontmatter-merging

簡報展示與錄影

功能	用法	參考檔案
螢幕錄影	按下 G 鍵開啟攝影機	presenter-recording
計時器	duration: 30min, timer: countdown	presenter-timer
遠端控制	slidev --remote	presenter-remote
振假名 (Ruby)	notesAutoRuby:	presenter-notes-ruby

匯出與建置

功能	用法	參考檔案
匯出選項	slidev export	core-exporting
建置與部署	slidev build	core-hosting
含 PDF 的建置	download: true	build-pdf
快取圖片	遠端 URL 自動快取	build-remote-assets
OG 社群預覽圖	seoMeta.ogImage 或 og-image.png	build-og-image
SEO 標籤	seoMeta:	build-seo-meta

匯出前置需求：匯出為 PDF/PPTX/PNG 時需安裝 pnpm add -D playwright-chromium。若匯出時出現瀏覽器相關錯誤，請先安裝此依賴套件。

編輯器與工具

功能	用法	參考檔案
側邊編輯器	點擊編輯圖示	editor-side
VS Code 擴充套件	安裝 antfu.slidev	editor-vscode
Prettier 格式化	prettier-plugin-slidev	editor-prettier
彈出/解構主題	slidev theme eject	tool-eject-theme
MCP 伺服器 (AI Agent)	http://localhost:<port>/__mcp 或 slidev mcp	tool-mcp

生命週期與 API

功能	用法	參考檔案
投影片 Hook 鉤子	onSlideEnter(), onSlideLeave()	api-slide-hooks
導覽 API	$nav, useNav()	core-global-context

常見版面配置

版面配置	用途
cover	標題 / 封面頁
center	置中內容
default	標準投影片
two-cols	雙欄版面（搭配 ::right:: 使用）
two-cols-header	頂部標題 + 雙欄版面
image / image-left / image-right	圖片版面配置
iframe / iframe-left / iframe-right	內嵌網址版面
quote	引言 / 引用頁
section	章節分隔頁
fact / statement	數據 / 關鍵宣示展示
intro / end	開場 / 結尾頁

相關資源

• 官方文件：https://sli.dev
• 主題畫廊：https://sli.dev/resources/theme-gallery
• 案例展示：https://sli.dev/resources/showcases