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]

Slidev

Slidev - Presentation Slides for Developers

When to Use

Quick Start

Basic Syntax

Core References

Feature Reference

Code & Editor

Diagrams & Math

Layout & Styling

Animation & Interaction

Syntax Extensions

Presenter & Recording

Export & Build

Editor & Tools

Lifecycle & API

Common Layouts

Resources

来源与署名

更多Documents & Office技能

Process Letter

Teaser

Clean Data Xls

Datapack Builder

Cim Builder

Ppt Template Creator