Slidev

作者 slidevjs73053ab2b965無授權條款48K 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫6 天前更新

Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.

僅含說明Documents & Office Software Development

AI 產生的概覽

使用 Markdown 建立並演示以 Slidev 為基礎的網頁簡報，涵蓋語法、版面、程式碼高亮、動畫與匯出。

功能: 此技能引導代理使用 Slidev（以 Vite、Vue 與 Markdown 為基礎的簡報框架）建立並演示面向開發者的簡報。內容涵蓋簡報語法、frontmatter 設定、內建版面與元件、程式碼高亮與 Monaco 編輯器、圖表與 LaTeX、動畫、講者與錄影功能，以及匯出與託管選項。它是一套純說明性的參考資料，隨附的參考檔案逐項說明各項功能，並未附上可執行的指令碼。
適用情境: 適用於製作技術簡報、研討會演講、程式碼導覽、工作坊或教學教材等 Slidev 簡報。也適合需要即時程式碼範例、圖表、數學公式、互動式示範、講者備註，或需要匯出為 PDF、PPTX 或託管為 SPA 的情境。
執行需求: 需要具備 Node.js 與 pnpm 的 Slidev 專案環境（例如 pnpm create slidev、pnpm run dev、pnpm run build 等指令）。匯出 PDF/PPTX/PNG 需要安裝 playwright-chromium 開發相依套件。此技能不附指令碼，僅為說明與參考文件。

Slidev - Presentation Slides for Developers

Web-based slides maker built on Vite, Vue, and Markdown.

When to Use

Technical presentations or slidedecks with live code examples
Syntax-highlighted code snippets with animations
Interactive demos (Monaco editor, runnable code)
Mathematical equations (LaTeX) or diagrams (Mermaid, PlantUML)
Record presentations with presenter notes
Export to PDF, PPTX, or host as SPA
Code walkthroughs for developer talks or workshops

Quick Start

bash

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

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

Verify: After pnpm run dev, confirm slides load at http://localhost:3030. After pnpm run export, check the output PDF exists in the project root.

Basic Syntax

---theme: defaulttitle: My Presentation---
# First Slide
Content here
---
# Second Slide
More content
<!--Presenter notes go here-->

---theme: defaulttitle: My Presentation---
# First Slide
Content here
---
# Second Slide
More content
<!--Presenter notes go here-->

--- separates slides
First frontmatter = headmatter (deck config)
HTML comments = presenter notes

Core References

Topic	Description	Reference
Markdown Syntax	Slide separators, frontmatter, notes, code blocks	core-syntax [blocked]
Animations	v-click, v-clicks, motion, transitions	core-animations [blocked]
Headmatter	Deck-wide configuration options	core-headmatter [blocked]
Frontmatter	Per-slide configuration options	core-frontmatter [blocked]
CLI Commands	Dev, build, export, theme commands	core-cli [blocked]
Components	Built-in Vue components	core-components [blocked]
Layouts	Built-in slide layouts	core-layouts [blocked]
Exporting	PDF, PPTX, PNG export options	core-exporting [blocked]
Hosting	Build and deploy to various platforms	core-hosting [blocked]
Global Context	$nav, $slidev, composables API	core-global-context [blocked]

Feature Reference

Code & Editor

Feature	Usage	Reference
Line highlighting	```ts {2,3}	code-line-highlighting [blocked]
Click-based highlighting	```ts {1\|2-3\|all}	code-line-highlighting [blocked]
Line numbers	`lineNumbers: true` or `{lines:true}`	code-line-numbers [blocked]
Scrollable code	`{maxHeight:'100px'}`	code-max-height [blocked]
Code tabs	`::code-group` (requires `comark: true`)	code-groups [blocked]
Monaco editor	```ts {monaco}	editor-monaco [blocked]
Run code	```ts {monaco-run}	editor-monaco-run [blocked]
Edit files	`<<< ./file.ts {monaco-write}`	editor-monaco-write [blocked]
Code animations	````md magic-move	code-magic-move [blocked]
TypeScript types	```ts twoslash	code-twoslash [blocked]
Import code	`<<< @/snippets/file.js`	code-import-snippet [blocked]

Diagrams & Math

Layout & Styling

Feature	Usage	Reference
Canvas size	`canvasWidth`, `aspectRatio`	layout-canvas-size [blocked]
Zoom slide	`zoom: 0.8`	layout-zoom [blocked]
Scale elements	`<Transform :scale="0.5">`	layout-transform [blocked]
Layout slots	`::right::`, `::default::`	layout-slots [blocked]
Scoped CSS	`<style>` in slide	style-scoped [blocked]
Global layers	`global-top.vue`, `global-bottom.vue`	layout-global-layers [blocked]
Draggable elements	`v-drag`, `<v-drag>`	layout-draggable [blocked]
Icons	`<mdi-icon-name />`	style-icons [blocked]

Animation & Interaction

Feature	Usage	Reference
Click animations	`v-click`, `<v-clicks>`	core-animations [blocked]
Rough markers	`v-mark.underline`, `v-mark.circle`	animation-rough-marker [blocked]
Drawing mode	Press `C` or config `drawings:`	animation-drawing [blocked]
Direction styles	`forward:delay-300`	style-direction [blocked]
Note highlighting	`[click]` in notes	animation-click-marker [blocked]

Syntax Extensions

Feature	Usage	Reference
Comark syntax	`comark: true` + `{style="color:red"}`	syntax-comark [blocked]
Block frontmatter	```yaml instead of `---`	syntax-block-frontmatter [blocked]
Import slides	`src: ./other.md`	syntax-importing-slides [blocked]
Merge frontmatter	Main entry wins	syntax-frontmatter-merging [blocked]

Presenter & Recording

Feature	Usage	Reference
Recording	Press `G` for camera	presenter-recording [blocked]
Timer	`duration: 30min`, `timer: countdown`	presenter-timer [blocked]
Remote control	`slidev --remote`	presenter-remote [blocked]
Ruby text	`notesAutoRuby:`	presenter-notes-ruby [blocked]

Export & Build

Feature	Usage	Reference
Export options	`slidev export`	core-exporting [blocked]
Build & deploy	`slidev build`	core-hosting [blocked]
Build with PDF	`download: true`	build-pdf [blocked]
Cache images	Automatic for remote URLs	build-remote-assets [blocked]
OG image	`seoMeta.ogImage` or `og-image.png`	build-og-image [blocked]
SEO tags	`seoMeta:`	build-seo-meta [blocked]

Export prerequisite: pnpm add -D playwright-chromium is required for PDF/PPTX/PNG export. If export fails with a browser error, install this dependency first.

Editor & Tools

Feature	Usage	Reference
Side editor	Click edit icon	editor-side [blocked]
VS Code extension	Install `antfu.slidev`	editor-vscode [blocked]
Prettier	`prettier-plugin-slidev`	editor-prettier [blocked]
Eject theme	`slidev theme eject`	tool-eject-theme [blocked]
MCP server (AI agents)	`http://localhost:<port>/__mcp` or `slidev mcp`	tool-mcp [blocked]

Lifecycle & API

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

來源與署名

來源：slidevjs/slidev位於skills/slidev提交73053ab

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Feature	Usage	Reference
Mermaid diagrams	```mermaid	diagram-mermaid [blocked]
PlantUML diagrams	```plantuml	diagram-plantuml [blocked]
LaTeX math	$inline$ or `$$block$$`	diagram-latex [blocked]

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