SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场slidev

slidev

编程与开发

查看项目

更新于 10-15 14:50

技能介绍

用途

Slidev 是一个面向开发者的基于网页的演示幻灯片制作工具，构建在 Vite、Vue 和 Markdown 之上。它适合制作技术演示或包含实时代码示例的幻灯片，支持语法高亮代码片段与动画、交互式演示（Monaco 编辑器、可运行代码）、数学公式（LaTeX）或图表（Mermaid、PlantUML），也支持录制演示并附带演讲者备注，以及导出为 PDF、PPTX 或作为 SPA 托管。

主要能力

  • Markdown 语法：使用 --- 分隔幻灯片，首个 frontmatter 为 headmatter（幻灯片组配置），HTML 注释作为演讲者备注。
  • 代码与编辑器：支持行高亮（如 ts {2,3}）、基于点击的高亮（ts {1|2-3|all}）、行号、可滚动代码、代码标签页（需 comark: true）、Monaco 编辑器（ts {monaco}）、运行代码（ts {monaco-run}）、编辑文件（<<< ./file.ts {monaco-write}）、代码动画（````md magic-move）、TypeScript 类型（```ts twoslash）、导入代码（<<< @/snippets/file.js）。
  • 图表与数学：Mermaid 图表（mermaid）、PlantUML 图表（plantuml）、LaTeX 数学（$inline$ 或 $$block$$）。
  • 布局与样式：画布尺寸（canvasWidth、aspectRatio）、缩放幻灯片（zoom: 0.8）、缩放元素（<Transform :scale="0.5">）、布局插槽（::right::、::default::）、作用域 CSS（幻灯片内 <style>）、全局图层（global-top.vue、global-bottom.vue）、可拖拽元素（v-drag、<v-drag>）、图标（<mdi-icon-name />）。
  • 动画与交互：点击动画（v-click、<v-clicks>）、粗糙标记（v-mark.underline、v-mark.circle）、绘图模式（按 C 或配置 drawings:）、方向样式（forward:delay-300）、备注高亮（备注中的 [click]）。
  • 语法扩展：Comark 语法（comark: true + {style="color:red"}）、块 frontmatter（使用 ```yaml 代替 ---）、导入幻灯片（src: ./other.md）、合并 frontmatter（主入口优先）。
  • 演讲者与录制：录制（按 G 打开摄像头）、计时器（duration: 30min、timer: countdown）、远程控制（slidev --remote）、Ruby 文本（notesAutoRuby:）。
  • 导出与构建：导出选项（slidev export）、构建与部署（slidev build）、构建时包含 PDF（download: true）、缓存图片（远程 URL 自动缓存）、OG 图片（seoMeta.ogImage 或 og-image.png）、SEO 标签（seoMeta:）。
  • 编辑器与工具：侧边编辑器（点击编辑图标）、VS Code 扩展（安装 antfu.slidev）、Prettier（prettier-plugin-slidev）、弹出主题（slidev theme eject）、MCP 服务器（AI 智能体，http://localhost:<port>/__mcp 或 slidev mcp）。
  • 生命周期与 API：幻灯片钩子（onSlideEnter()、onSlideLeave()）、导航 API（$nav、useNav()）。
  • 常用布局：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（介绍/结束）。

使用方式

快速开始：

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。

导出前提：PDF/PPTX/PNG 导出需要 pnpm add -D playwright-chromium。如果导出因浏览器错误失败，请先安装此依赖。

适用场景

  • 技术演示或包含实时代码示例的幻灯片
  • 带语法高亮的代码片段与动画
  • 交互式演示（Monaco 编辑器、可运行代码）
  • 数学公式（LaTeX）或图表（Mermaid、PlantUML）
  • 录制演示并附带演讲者备注
  • 导出为 PDF、PPTX 或作为 SPA 托管
  • 开发者演讲或工作坊的代码走查

限制

  • 导出 PDF/PPTX/PNG 需要额外安装 playwright-chromium，否则可能因浏览器错误失败。
  • 代码标签页功能需要启用 comark: true。
  • 其他具体限制暂未提供。

资源

  • 文档：https://sli.dev
  • 主题库：https://sli.dev/resources/theme-gallery
  • 展示案例：https://sli.dev/resources/showcases