我一直觉得，做技术分享这件事，和程序员平时的工作流有点拧巴，我指的是写 PPT 做技术分享！

写代码可以用 Git 管理，写文档可以用 Markdown，写博客也可以放到仓库里慢慢改。

但是如果你的领导让你做 PPT 的时候，那就到了另外一种状态。

配色要讲究吧，字体大小得调吧，代码贴进去缩进全乱了得重新排吧，图片左对齐还是居中得反复试吧，动画效果出来一看不对又得改吧——每一步都不是什么难事，但每一步都需要你从头摸索。

最后折腾一下午，文件名变成 分享稿-最终版-v2-真的最终版.pptx。

这当然不是说 PowerPoint 不好。PowerPoint 很成熟，Keynote 也很好用。只是对程序员来说，有些场景确实有点别扭。

我这几天就是碰到一个类似的事情，领导要求做一个技术分享，页面里大部分内容其实就是标题、要点、代码块和几张架构图。结果为了这些东西，我要在一个图形界面里来回拖拽。尤其是代码，一旦贴进 PPT，缩进、字体、颜色经常都要重新调。最省事的办法是截图，但截图又带来另一个问题：后面代码改了，截图也得重新截。

其实之前我也试过 Reveal.js，同样是用代码写幻灯片的思路。但 Reveal.js 完全基于 HTML，每一页都是标签套标签，写内容之前得先搭结构，加个过渡动画还要手写属性。整个过程虽然比 PPT 自由，但还是慢。

直到我无意间发现 Slidev，我看了下文档，第一反应是：这东西不就是把 PPT 当成一个前端项目来写吗？

内容用 Markdown 写，样式用主题控制，代码块天然高亮，需要交互的时候还能写 Vue 组件。写完之后可以本地演示，也可以导出 PDF，甚至直接部署成一个网页。

我终于可以用程序员的思路写 PPT 了！

最最关键的是，实际上我只需要把我以前写的技术文章整理一下，甩进去让 AI 改改，就能得到一个效果还不错的演示文稿了。

所以我连夜写了这篇文章，赶紧分享给大家。

Slidev 是什么

Slidev 是一个面向开发者的演示文稿工具。

谨防各位已经迫不及待，官网先放这里：

❝

Slidev
https://sli.dev/

它不是传统 PPT 软件，也不是简单的 Markdown 转 PDF 工具。更准确地说，它是一个基于 Web 技术的幻灯片框架。

它的入口通常就是一个 slides.md 文件。你在这个文件里写 Markdown，用 --- 分割不同页面，Slidev 会把它渲染成可以在浏览器里播放的幻灯片。

一个最简单的例子大概是这样：

---
theme: default
title: Hello Slidev
---

# Hello Slidev

用 Markdown 写 PPT。

---

# 第二页

```kotlin
fun main() {
    println("Hello Slidev")
}
```

基本上，一眼就能看懂你想要的效果。

简单来讲，开头的 theme、title 是配置。中间的内容就是普通 Markdown。每个 --- 表示新的一页。

这也是 Slidev 上手比较舒服的地方。它没有先让你进入一个很重的编辑器，而是让你从一个 Markdown 文件开始。

对程序员来说，这也太自然了 —— 你先写个文章，然后慢慢的就能变成一个炫酷的演示文稿。

快速跑起来

创建一个 Slidev 项目很简单：

npm create slidev@latest

或者：

npm init slidev

npm 基本上算是程序员必备工具了吧（另一个就是 python）。

项目创建之后，大概会看到这些文件：

.
├── slides.md
├── package.json
├── components/
├── layouts/
├── public/
└── styles/

一开始最重要的只有 slides.md。其他几个目录可以先简单理解：

slides.md        # 幻灯片内容
components/      # 自定义 Vue 组件
layouts/         # 自定义布局
public/          # 图片等静态资源
styles/          # 自定义样式

启动项目：

npm run dev

然后浏览器里就能看到幻灯片了。

这一点和普通前端项目很像。你改 slides.md，页面会自动刷新。写技术分享的时候，这种反馈很好，很自然，有点像调试代码的感觉。你不需要在“编辑模式”和“放映模式”之间来回切。

当然，这里也能看出 Slidev 的第一个门槛：它需要 Node 环境，需要包管理器，也需要你接受前端项目这套东西。

slides.md

Slidev 的核心就是 slides.md，对，没错，整个 PPT 就是一个 Markdown 文件

比如下面这个演示文稿：

---
theme: default
title: Slidev 入门
---

# Slidev 入门

像写 Markdown 一样写 PPT。

---

# 为什么需要 Slidev？

- 内容是纯文本
- 代码展示更自然
- 可以用 Git 管理
- 可以使用 Vue 组件

这里有几个点。

第一，文件开头的 --- 包起来的内容是全局配置。

---
theme: default
title: Slidev 入门
---

第二，后面的 --- 用来分割页面。

# 第一页

---

# 第二页

第三，每一页本身基本就是 Markdown。

这就带来另一个很直接的好处：内容可以轻松被 Git 管理。

PPT 文件当然也能放 Git 里，但你很难看清楚两次提交到底改了什么。Markdown 就不一样了，新增了哪一页，删了哪一行，改了哪个标题，diff 一眼能看出来，这算是 Slidev 的另一个优势吧。

如果你写的是长期维护的技术课件，这一点会非常有用。

比如公司内部培训材料，一年可能要改好几次，你能轻松的知道每次版本升级的具体内容/修改内容。Slidev 这种纯文本方式，维护起来就清楚很多。

页面布局

Slidev 不是让你每一页都从零开始排版。

它有 layout 的概念。

比如某一页想居中显示，可以这样写：

---
layout: center
---

# 一个重要结论

想要两栏布局，可以这样写：

---
layout: two-cols
---

# 左边

这里放问题。

::right::

# 右边

这里放答案。

这和 PowerPoint 的思路不太一样。

在 PowerPoint 里，你经常是在页面上手动拖元素。Slidev 更像是先选一种结构，然后把内容填进去。

这种方式的好处是统一。

一套分享里，标题页、章节页、代码页、总结页，可以保持比较稳定的结构。你不用每一页都调位置。

坏处也很明显：如果你想做非常精细的视觉排版，Slidev 没有 PowerPoint 那么直接。你当然可以写 CSS，可以自定义布局，但那就变成前端开发了。

所以 Slidev 适合的是“结构清楚的技术表达”，不是“视觉优先的设计表达”。

代码块终于不用截图了

Slidev 对程序员最直接的吸引力，就是代码展示。

写技术分享经常会放代码。用传统 PPT 的时候，我最不喜欢的就是处理代码块。

复制进去吧，格式容易乱。截图进去吧，后面不好改。放太多吧，页面很挤。放太少吧，又讲不清楚。

在 Slidev 里，代码块就是普通 Markdown 代码块：

```kotlin
fun main() {
    val tool = "Slidev"
    println("Hello, $tool")
}
```

写 Java 也一样：

```java
public class Main {
    public static void main(String[] args) {
        System.out.println("Hello Slidev");
    }
}
```

它会自动做语法高亮。

这听起来只是一个小功能，但实际写技术分享的时候非常关键。因为代码不是装饰，它就是内容本身。代码最好能复制、能修改、能参与版本管理，而不是变成一张图片。

如果你的分享经常涉及 Android、Kotlin、Java、Rust、前端、后端，Slidev 在这一点上会比传统 PPT 顺手很多。

点击逐步展示

演示的时候，有些内容不适合一次性全放出来。

比如你要讲一个问题的定位过程，最好是一层一层展开。先出现现象，再出现猜测，再出现验证方式，最后出现结论。

Slidev 可以用 v-clicks 做逐步展示：

# 今天讲什么

<v-clicks>

- Slidev 是什么
- 如何创建项目
- Markdown 基础语法
- 代码展示
- 导出和部署

</v-clicks>

等等，v-clicks，这不就是 Vue 吗？没错，继续往下看，我会讲到。

放映时，每点一次出现一条。

这个能力很实用。技术分享很多时候不是把信息堆出来，而是控制信息出现的顺序。你要让观众跟着你的思路走，而不是一打开页面就把结论全看完。

演讲者备注

Slidev 也支持演讲者备注：

# Slidev 是什么

Slidev 是一个面向开发者的演示文稿工具。

<!--
这里提醒自己：
先讲为什么程序员会需要它。
不要一上来就讲命令。
-->

这类备注不会直接展示给观众，但你自己可以在演讲者视图里看到。

我觉得这个功能对技术分享很重要。

因为技术分享其实有两层内容。

页面上给观众看的内容应该尽量简洁。你不能把所有解释都塞到一页里，否则它就不是 PPT，而是文章截图。

但你自己讲的时候，又需要一些提示。尤其是讲复杂技术点时，很容易忘记某个过渡句或者某个例子。

演讲者备注正好放这些内容。

Vue 组件

这正是 Slidev 和普通 Markdown PPT 的分界线。

如果 Slidev 只是 Markdown 写 PPT，那它也还不错，但不算特别稀奇，它真正有意思的地方是：可以直接用 Vue 组件。

比如你在 components/Counter.vue 里写一个组件：

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">
    Count: {{ count }}
  </button>
</template>

然后在 slides.md 里直接使用：

# 一个交互组件

<Counter />

这时候，PPT 就不只是静态页面了。它可以有按钮，可以有状态，可以做交互。

比如你要讲：

状态机流转
Compose 重组过程
协程调度过程
算法执行过程
网络请求状态变化
Agent 多轮对话过程

这些内容如果用传统 PPT 做，通常要画很多页，或者做一堆动画。Slidev 里可以直接写成组件，让它变成一个可操作的演示。

当然，这也是门槛。

你如果不会 Vue，也不想写前端，那这部分能力可能暂时用不上。但即使不用组件，只用 Markdown、代码块、布局、导出，Slidev 也已经能完成大部分技术分享了。

组件能力更多是它的上限。

导出和分享

Slidev 写完之后，有几种常见用法。

第一种，直接本地演示：

npm run dev

第二种，导出成 PDF：

slidev export

第三种，构建成静态网站：

slidev build

如果只是发给别人看，PDF 最方便。

如果想保留交互能力，最好构建成 Web 页面部署。因为一旦导出成 PDF 或 PPTX，很多 Web 交互能力就不存在了。

如果你的 Slidev 只是普通文字和代码块，导出 PDF 问题不大。如果你用了很多 Vue 组件，那它更适合以网页形式分享。

也就是说，Slidev 既能当 PPT 用，也能当一个小型前端项目用。你最终怎么发布，取决于你的内容是不是依赖交互。

总结

Slidev 给程序员提供了另一条写演示文稿的路：当你的演示文稿本身就是技术内容时，可以不用把它塞进一个二进制 PPT 文件里，而是把它当成一个可以直接用来演示的项目，一个可以维护的项目。

内容是 Markdown。

代码块还是代码块。

样式交给主题。

交互交给 Vue。

版本交给 Git。

酷炫交互交给 Web。

这套东西放在一起，就很符合程序员的习惯。

当然，它也有成本。你需要 Node 环境，需要接受命令行，需要理解一些前端项目的概念。如果只是做普通汇报，或者要交给非技术同事反复编辑，那它未必合适。

但如果你经常做技术分享，尤其是经常写代码示例、架构说明、培训课件，我觉得 Slidev 很值得试试。

对我来说，它最大的好处就是：程序员平时写 Markdown 就很顺手，Slidev 直接在这个基础上就能生成演示文档，不用在写作和做 PPT 之间切换工作流。