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
Scoped CSS 樣式	投影片內的 <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
手繪風標記	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
彈出/解鎖主題 (Eject)	slidev theme eject	tool-eject-theme

生命週期與 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