Slidev：基于Vite和Vue的开发者演示工具，支持Markdown、代码高亮与交互

slidev by slidevjs/slidev

2,600 周安装量

45,100 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/slidevjs/slidev --skill slidev

开发生产力

🇨🇳中文介绍

Slidev - 面向开发者的演示文稿幻灯片

基于 Vite、Vue 和 Markdown 构建的网页幻灯片制作工具。

适用场景

包含实时代码示例的技术演示或幻灯片
支持动画的语法高亮代码片段
交互式演示（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
---

# 第一页幻灯片

内容写在这里

---

# 第二页幻灯片

更多内容

<!--
演讲者备注写在这里
-->

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

主题	描述	参考链接
Markdown 语法	幻灯片分隔符、frontmatter、备注、代码块	core-syntax
动画	v-click, v-clicks, motion, transitions	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
行号	`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
块级 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
注音文本	`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

功能	用法	参考链接
幻灯片钩子	`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`	嵌入 URL
`quote`	引用
`section`	章节分隔
`fact` / `statement`	数据/声明展示
`intro` / `end`	介绍/结束幻灯片

🇺🇸English

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

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)

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: default
title: 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
Animations	v-click, v-clicks, motion, transitions	core-animations
Headmatter	Deck-wide configuration options	core-headmatter
Frontmatter	Per-slide configuration options	core-frontmatter
CLI Commands	Dev, build, export, theme commands	core-cli
Components	Built-in Vue components

Feature Reference

Code & Editor

Feature	Usage	Reference
Line highlighting	````ts {2,3}`	code-line-highlighting
Click-based highlighting	````ts {1	2-3
Line numbers	`lineNumbers: true` or `{lines:true}`	code-line-numbers
Scrollable code	`{maxHeight:'100px'}`	code-max-height
Code tabs	(requires )

Diagrams & Math

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

Layout & Styling

Feature	Usage	Reference
Canvas size	`canvasWidth`, `aspectRatio`	layout-canvas-size
Zoom slide	`zoom: 0.8`	layout-zoom
Scale elements	`<Transform :scale="0.5">`	layout-transform
Layout slots	`::right::`,

Animation & Interaction

Feature	Usage	Reference
Click animations	`v-click`, `<v-clicks>`	core-animations
Rough markers	`v-mark.underline`, `v-mark.circle`	animation-rough-marker
Drawing mode	Press `C` or config `drawings:`

Syntax Extensions

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

Presenter & Recording

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

Export & Build

Feature	Usage	Reference
Export options	`slidev export`	core-exporting
Build & deploy	`slidev build`	core-hosting
Build with PDF	`download: true`	build-pdf
Cache images	Automatic for remote URLs	build-remote-assets

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
VS Code extension	Install `antfu.slidev`	editor-vscode
Prettier	`prettier-plugin-slidev`	editor-prettier
Eject theme	`slidev theme eject`	tool-eject-theme

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` / /

Resources

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

Weekly Installs

2.6K

Repository

slidevjs/slidev

GitHub Stars

45.1K

First Seen

Jan 26, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykWarn

Installed on

opencode2.2K

codex2.1K

gemini-cli2.1K

github-copilot2.1K

amp1.9K

kimi-cli1.9K

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

102,200 周安装

Slidev：基于Vite和Vue的开发者演示工具，支持Markdown、代码高亮与交互

🇨🇳中文介绍

Slidev - 面向开发者的演示文稿幻灯片

适用场景

快速开始

基础语法

相关 Skills

核心参考

功能参考

代码与编辑器

图表与数学公式

布局与样式

动画与交互

语法扩展

演讲者与录制

导出与构建

编辑器与工具

生命周期与 API

常用布局

资源