返回目录
开源项目文档办公类新手

Slidev — 为开发者打造的 Markdown 演示幻灯片工具

Slidev 是一个面向开发者的演示幻灯片项目,以 Markdown 为核心编写内容,基于 Vite 与 Vue 3 构建,支持代码高亮、实时编码、主题定制、LaTeX 公式、Mermaid 图表、演讲者模式、绘图标注、录制与导出 PDF/PNG/PPTX,采用 MIT 许可证。

0 次阅读2026/09/17 发布
Slidev — 为开发者打造的 Markdown 演示幻灯片工具 来源图片

社区作者 · zZz

它解决什么问题

Slidev 的定位是“Presentation Slides for Developers”,即面向开发者(🧑‍💻👩‍💻👨‍💻)的演示幻灯片工具。项目由 Sponsor Program 赞助支持,官方提供 Video Preview 与 Documentation(配图 1 为 Slidev 的 Logo)。

核心特性(按来源原文):

  • 📝 基于 Markdown:专注于内容,可使用自己习惯的编辑器。
  • 🧑‍💻 开发者友好:内置代码高亮、实时编码(live coding)等。
  • 🎨 可主题化(Themable):主题可作为 npm 包共享与复用。
  • 🌈 时尚样式(Stylish):通过 UnoCSS 提供按需的工具类。
  • 🤹 交互性(Interactive):无缝嵌入 Vue 组件。
  • 🎙 演讲者模式(Presenter Mode):可使用另一个窗口,甚至用手机控制幻灯片。
  • 🎨 绘图(Drawing):在幻灯片上绘制与标注。
  • 🧮 LaTeX:内置 LaTeX 数学公式支持。
  • 📰 图表(Diagrams):使用 Mermaid 通过文本描述创建图表。
  • 🌟 图标(Icons):直接访问任意图标集的图标。
  • 💻 编辑器(Editor):集成编辑器,或使用 VSCode 扩展。
  • 🎥 录制(Recording):内置录制与摄像头视图。
  • 📤 可移植(Portable):导出为 PDF、PNG 或 PPTX。
  • ⚡️ 快速:由 Vite 提供即时重载。
  • 🛠 可扩展(Hackable):可使用 Vite 插件、Vue 组件或任意 npm 包。

技术栈(Tech Stack):

  • Vite:极快的前端工具链。
  • 由 Vue 3 驱动的 Markdown:专注内容,同时在需要时拥有 HTML 与 Vue 组件的能力。
  • UnoCSS:按需的 utility-first CSS 引擎,方便为幻灯片设置样式。
  • Shiki、Monaco Editor:一流的代码片段支持与实时编码能力。
  • RecordRTC:内置录制与摄像头视图。
  • VueUse 系列:@vueuse/core、@vueuse/motion 等。
  • Iconify:图标集集合。
  • Drauu:绘图与标注支持。
  • KaTeX:LaTeX 数学渲染。
  • Mermaid:文本化图表。

文档与社区:官方文档提供 English、中文文档、Français、Español、Русский、Português-BR 等语言;Discord 社区地址为 chat.sli.dev。完整示例可查看仓库中的 demo 目录,该目录同时也是作者上一次演讲的源文件。赞助商部分列出了支持该项目的赞助者(配图 3 为赞助商 Logo),在线试用入口参见配图 2 所示的 StackBlitz 入口。

— 本文由 AI 根据公开来源辅助整理,命令、版本与许可证请在使用前到原始页面复核。

安装 / 开始使用

环境准备:

  • 本机需安装 Node.js >= 22.12.0(安装 Node.js 即自带 npm)。

方式一:在线试用

  • 直接访问 sli.dev/new,在浏览器中创建并试用 Slidev,无需本地安装。

方式二:本地初始化项目

  1. 安装 Node.js >= 22.12.0。
  1. 在终端执行初始化命令:
命令
npm init slidev
  1. 按该命令的交互提示完成项目创建(初始化过程会在本地生成 Slidev 项目结构与依赖)。
  1. 初始化完成后按交互提示/生成的说明启动项目,在浏览器中预览幻灯片;开发过程由 Vite 提供即时重载。

编辑器与编写:

  • 可直接使用自己熟悉的编辑器编写 Markdown 内容,也可使用 Slidev 的集成编辑器,或安装 VSCode 扩展。

导出与展示:

  • 导出格式支持 PDF、PNG、PPTX。
  • 演示时可使用演讲者模式,在另一个窗口甚至手机上控制幻灯片。

学习与排错资源:

  • 官方文档:提供 English、中文文档、Français、Español、Русский、Português-BR。
  • 完整示例:仓库中的 demo 目录(也是作者上一次演讲的源文件)。
  • 社区:Discord chat.sli.dev。
  • 说明:来源未提供更细的排错 FAQ 条目、具体启动脚本名或导出命令,相关细节请以上述官方文档与初始化命令的提示为准。

来源教程配图

Slidev
配图 1 · Slidev查看原图
教程配图
配图 2 · 教程配图查看原图
Logos from Sponsors
配图 3 · Logos from Sponsors查看原图

适用场景

用 Markdown 编写技术演讲
分享与教学幻灯片
在幻灯片中做代码高亮与实时编码(live coding)演示
无缝嵌入 Vue 组件实现交互式演示
使用演讲者模式在另一个窗口或手机上控制幻灯片
在幻灯片上绘制与标注批注
用 LaTeX 编写数学公式
用 Mermaid 通过文本描述生成图表
内置录制并带摄像头视图
用于制作演示视频
将幻灯片导出为 PDF
PNG 或 PPTX 进行分发