slidev

Slidev - 開発者向けプレゼンテーションスライド

Vite、Vue、Markdown 上に構築された Web ベースのスライド作成ツールです。

使用すべき場面

• ライブコード例を伴う技術プレゼンテーションやスライドデック
• アニメーション付きのシンタックスハイライトされたコードスニペット
• インタラクティブなデモ（Monaco エディター、実行可能なコード）
• 数式（LaTeX）やダイアグラム（Mermaid、PlantUML）
• 発表者ノート付きでのプレゼンテーションの録画
• PDF、PPTX へのエクスポート、または SPA としてのホスティング
• 開発者向けトークやワークショップでのコードウォークスルー

クイックスタート

pnpm create slidev    # Create project
pnpm run dev          # Start dev server (opens http://localhost:3030)
pnpm run build        # Build static SPA
pnpm run export       # Export to PDF (requires playwright-chromium)

確認: pnpm run dev の後、http://localhost:3030 でスライドが読み込まれることを確認します。pnpm run export の後、出力された PDF がプロジェクトルートに存在することを確認します。

基本構文

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

# First Slide

Content here

---

# Second Slide

More content

• --- はスライドを区切ります
• 最初の frontmatter = headmatter（デック設定）
• HTML コメント = 発表者ノート

コアリファレンス

トピック	説明	リファレンス
Markdown 構文	スライド区切り、frontmatter、ノート、コードブロック	core-syntax
アニメーション	v-click、v-clicks、モーション、トランジション	core-animations
Headmatter	デック全体の設定オプション	core-headmatter
Frontmatter	スライドごとの設定オプション	core-frontmatter
CLI コマンド	dev、build、export、テーマコマンド	core-cli
コンポーネント	組み込みの Vue コンポーネント	core-components
レイアウト	組み込みのスライドレイアウト	core-layouts
エクスポート	PDF、PPTX、PNG のエクスポートオプション	core-exporting
ホスティング	さまざまなプラットフォームへのビルドとデプロイ	core-hosting
グローバルコンテキスト	$nav、$slidev、コンポーザブル 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	スライド内の <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
ブロックフロントマター	--- の代わりに ```yaml	syntax-block-frontmatter
スライドのインポート	src: ./other.md	syntax-importing-slides
フロントマターのマージ	メインエントリが優先	syntax-frontmatter-merging

プレゼンターと録画

機能	使用方法	リファレンス
録画	カメラには G を押す	presenter-recording
タイマー	duration: 30min、timer: countdown	presenter-timer
リモートコントロール	slidev --remote	presenter-remote
ルビテキスト	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 エージェント)	http://localhost:<port>/__mcp または slidev mcp	tool-mcp

Lifecycle & API

Feature	Usage	Reference
Slide hooks	onSlideEnter(), onSlideLeave()	api-slide-hooks
Navigation API	$nav, useNav()	core-global-context

Common Layouts

Layout	Purpose
cover	Title/cover slide
center	Centered content
default	Standard slide
two-cols	Two columns (use ::right::)
two-cols-header	Header + two columns
image / image-left / image-right	Image layouts
iframe / iframe-left / iframe-right	Embed URLs
quote	Quotation
section	Section divider
fact / statement	Data/statement display
intro / end	Intro/end slides

Resources

• Documentation: https://sli.dev
• Theme Gallery: https://sli.dev/resources/theme-gallery
• Showcases: https://sli.dev/resources/showcases