⚡

Slidev幻灯片制作工具Skill slidev

Slidev是一款基于Vite、Vue和Markdown的web幻灯片制作工具，专为开发者设计，支持代码高亮、动画、交互式演示、数学方程和图表功能，适用于技术演讲、会议发言和教学材料制作。关键词：幻灯片、开发者、Markdown、Vue、代码高亮、动画、交互演示、技术演讲、教学工具、Web演示。

前端开发 0 次安装 0 次浏览 更新于 3/13/2026

name: slidev description: 使用Markdown、Vue组件、代码高亮、动画和交互功能为开发者创建和呈现基于网络的幻灯片。用于构建技术演示、会议发言或教学材料。

Slidev - 开发者的演示幻灯片

基于Vite、Vue和Markdown的web幻灯片制作工具。

何时使用

  • 带有实时代码示例的技术演示
  • 带有动画的语法高亮代码片段
  • 交互式演示（Monaco编辑器、可运行代码）
  • 数学方程（LaTeX）或图表（Mermaid、PlantUML）
  • 录制演示并带有演示者笔记
  • 导出为PDF、PPTX或作为SPA托管

快速开始

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

基本语法

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

# 第一张幻灯片

内容在这里

---

# 第二张幻灯片

更多内容

<!--
演示者笔记在这里
-->
  • --- 分隔幻灯片
  • 第一个frontmatter = headmatter（幻灯片组配置）
  • HTML注释 = 演示者笔记

核心参考

主题 描述 参考
Markdown语法 幻灯片分隔符、frontmatter、笔记、代码块 core-syntax
动画 v-click、v-clicks、运动、过渡 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、组合式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数学 $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

生命周期与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 嵌入URL
quote 引用
section 部分分隔符
fact / statement 数据/陈述显示
intro / end 介绍/结束幻灯片

资源