Slidev：使用简单，效果优雅的开发者专属演示文稿神器

用 Markdown 写幻灯片，让技术分享更高效、更优雅

作为开发者，我们经常需要做技术分享或会议报告。传统的演示工具（如 PowerPoint、Keynote）虽然功能强大，但对于开发者来说，肯定没有 Markdown 熟悉。今天给大家推荐一款专为开发者打造的演示工具 —— Slidev。

Slidev（Slide + dev，读作 /slaɪdɪv/）是一个基于 Web 的幻灯片制作和演示工具，专为开发者设计，让你专注于用 Markdown 编写内容。项目地址：

https://github.com/slidevjs/slidev

该项目目前在 GitHub 上已获得超过 44K Star，社区活跃度非常高，是技术演讲者的首选工具之一。

为什么选择 Slidev？

Slidev 结合了 Markdown 的简洁性和现代 Web 技术的强大功能，让你能够：

• 🎯 专注于内容：用 Markdown 编写，无需纠结样式调整，让我们关注于内容本身
• 💻 代码友好：内置语法高亮、实时编码、终端模拟，可以优雅地展示代码
• 🚀 极速迭代：基于 Vite 的热重载，每次保存即时预览，提高效率
• 🎨 主题丰富：官方和社区主题随心切换，支持 UnoCSS 原子化样式快速定制
• 🤹 交互式组件：还可以嵌入 Vue 组件，让幻灯片动起来，演示更生动
• 📤 多格式导出：一键导出 PDF、PPTX、PNG 或部署为单页应用，适配多场景

核心特性详解

📝 Markdown 驱动

用 Markdown 语法编写幻灯片，纯文本编辑，支持 Git 版本控制。用 --- 分隔每一页幻灯片，格式如下：

# 第1页标题

第一页内容

---

# 第2页标题

第二页内容

🧑‍💻 开发者友好功能

Slidev 提供一流的代码片段支持，还可以有动画的配合，详细的使用方式在默认例子中均有覆盖，其中包括：

• Shiki 语法高亮：与 VS Code 同源的精准着色
• Shiki Magic Move：代码差异动画展示
• Monaco Editor：演示中实时编辑运行代码
• TwoSlash 集成：TypeScript 类型悬停提示

📚 技术文档友好

对于学术和技术分享场景，Slidev 支持多种格式的图表与公式：

• LaTeX 支持：完美的数学公式渲染
• Mermaid 图表：文本描述生成流程图、时序图
• Iconify 图标：数千个图标直接调用

快速开始

Slidev 提供了多种使用方式，可以在线体验，也可以本地安装。

🌐 在线体验（零安装）

无需安装任何软件，直接在浏览器中编写和预览：sli.dev/new

🖥️ 本地安装

确保已安装 Node.js（>= 20.12.0），然后运行以下命令：

# 使用 pnpm 创建项目（推荐）
pnpm create slidev

# 或使用 npm
npm init slidev@latest

# 启动开发服务器
npm run dev

输入项目的信息，就能在本地生成一个默认的工程。浏览器自动打开，播放首页。

打开本地目录，可以看到相关的目录结构，其中的 slides.md 文件就是幻灯片的内容。

我们对比其中一页来找找感觉 —— 原文 Markdown：

可以看到编辑过程简单，展示效果也非常不错。

🐳 Docker 部署

如果需要快速在容器上部署演示文稿，也可以使用社区维护的 Docker 镜像，具体方法与效果与本地一致：

docker run -p 3030:3030 tangramor/slidev:latest

适用场景

Slidev 特别适合以下场景：

• 技术大会演讲：代码展示，排版优良
• 团队内部分享：Markdown 版本控制，协作方便高效
• 项目进度汇报：快速制作，专注内容而非排版

写在最后

我们可以从简单开始，用 Markdown 快速创建基础幻灯片；专注于内容，让工具处理样式和布局问题；优雅演示，享受流畅的演示体验和专业的外观。

无论你是需要做一次技术分享，还是想要创建教学材料，Slidev 都能提供卓越的体验。作为开发者，我非常推荐大家使用大模型（豆包，DeepSeek等）生成 Markdown 的文件，再用 Slidev 生成演示文档。如果使用中遇到什么问题，欢迎在评论区讨论。

项目地址：https://github.com/slidevjs/slidev

在线体验：https://sli.dev/new

官方文档：https://sli.dev/guide/

中文文档：https://cn.sli.dev/