Slidev - 开发者专属的网页幻灯片制作工具，基于Vite和Markdown

slidev by antfu/skills

4,400 周安装量

4,300 GitHub Stars

GitHub

安装命令

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

开发生产力

🇨🇳中文介绍

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

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

适用场景

包含实时代码示例的技术演示
支持动画的语法高亮代码片段
交互式演示（Monaco 编辑器，可运行代码）
数学公式（LaTeX）或图表（Mermaid，PlantUML）
录制带有演讲者备注的演示文稿
导出为 PDF、PPTX 或作为 SPA 托管

快速开始

pnpm create slidev    # 创建项目
pnpm run dev          # 启动开发服务器
pnpm run export       # 导出为 PDF

基础语法

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

# 第一张幻灯片

内容在此

---

# 第二张幻灯片

更多内容

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

--- 分隔幻灯片
第一个 frontmatter = headmatter（演示文稿配置）
HTML 注释 = 演讲者备注

核心参考

主题	描述	参考链接
Markdown 语法

广告位招租

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

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

联系我们

功能	用法	参考链接
行高亮	````ts {2,3}`	code-line-highlighting
基于点击的高亮	````ts {1	2-3
行号	`lineNumbers: true` 或 `{lines:true}`	code-line-numbers
可滚动代码	`{maxHeight:'100px'}`	code-max-height
代码标签页	`::code-group` (需要 `mdc: 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

功能	用法	参考链接
MDC 语法	`mdc: true` + `{style="color:red"}`	syntax-mdc
块级 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

功能	用法	参考链接
侧边编辑器	点击编辑图标	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`	开场/结束幻灯片

2026 年 1 月 28 日

🇺🇸English

Slidev - Presentation Slides for Developers

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

When to Use

Technical presentations 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

Quick Start

pnpm create slidev    # Create project
pnpm run dev          # Start dev server
pnpm run export       # Export to PDF

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	core-components
Layouts	Built-in slide layouts	core-layouts

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
MDC syntax	`mdc: true` + `{style="color:red"}`	syntax-mdc
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

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

3.4K

Repository

antfu/skills

GitHub Stars

3.9K

First Seen

Jan 28, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykWarn

Installed on

opencode2.7K

codex2.6K

gemini-cli2.5K

github-copilot2.4K

cursor2.4K

claude-code2.3K