🚀 快速安装

复制以下命令并运行，立即安装此 Skill：

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

💡 提示：需要 Node.js 和 NPM

Slidev – 开发者的演示文稿

基于 Vite、Vue 和 Markdown 的网页演示文稿制作工具。

何时使用

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

快速开始

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

基本语法

---
theme: default
title: 我的演示文稿
---

# 第一页

这里是内容

---

# 第二页

更多内容

<!--
演讲者备注写在这里
-->
  • --- 分隔幻灯片
  • 第一个 frontmatter = 头部配置（演示文稿全局配置）
  • HTML 注释 = 演讲者备注

核心参考文档

主题 描述 参考文档
Markdown 语法 幻灯片分隔符、frontmatter、备注、代码块 core-syntax
动画效果 v-click, v-clicks, 运动, 过渡 core-animations
头部配置 演示文稿全局配置选项 core-headmatter
每页 frontmatter 单页配置选项 core-frontmatter
CLI 命令 开发、构建、导出、主题命令 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 (需要启用 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 数学公式 $行内公式$ 或 $$块级公式$$ 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
缓存图片 远程图片链接自动缓存 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

生命周期与 API

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

资源

📄 原始文档

完整文档（英文）：

https://skills.sh/antfu/skills/slidev

💡 提示：点击上方链接查看 skills.sh 原始英文文档，方便对照翻译。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。