Xiaofeng Wu

Xiaofeng Wu

Ph.D.

Generated Image

Slidev: A Modern Presentation Tool

3 minute read

Published:

用 Slidev 制作 PPT 的体验.

什么是 Slidev?

Slidev 是一个基于 Markdown 的演示文稿工具，它允许开发者使用熟悉的 Markdown 语法来创建精美的演示文稿。它的主要特点是：

  • 使用 Markdown 编写内容
  • 支持代码高亮
  • 支持主题定制

安装步骤详解

当前环境信息

  • Node.js 版本：v23.11.0（满足要求）
  • 包管理器：pnpm（推荐）
  • 操作系统：macOS

1. 前置条件检查

确保你的 MacBook 上已经安装了：

  • Node.js (需要 v18.0 或更高版本)
    • 作用：提供 JavaScript 运行环境
    • 检查方法：在终端运行 node -v
    • 当前版本：v23.11.0（满足要求）
  • pnpm 包管理器（推荐使用）
    • 作用：比 npm 更快的包管理器，节省磁盘空间
    • 检查方法：在终端运行 pnpm -v

2. 安装 pnpm

# 安装 pnpm
npm i -g pnpm

这一步的作用：

  • 使用 npm 全局安装 pnpm
  • -g 参数表示全局安装，可以在任何目录使用
  • 安装完成后，可以使用 pnpm 命令替代 npm

3. 创建 Slidev 项目

# 使用 pnpm 创建项目
pnpm create slidev

创建过程中会询问：

  1. Project name（项目名称）
    • 输入你想要的演示文稿项目名称
    • 例如：slidev-demo
  2. Install and start it now?（是否立即安装并启动）
    • 选择 yes 会自动安装依赖并启动项目
    • 选择 no 则只创建项目结构
  3. Choose the package manager（选择包管理器）
    • 推荐选择 pnpm
    • 其他选项包括 npm、yarn 等

创建完成后，项目会自动：

  • 安装所需依赖
  • 生成初始的 slides.md 文件
  • 配置基本的项目结构

4. 启动项目

# 进入项目目录
cd your-slidev-project

# 启动开发服务器
pnpm dev

多个 Markdown 文件管理多个演示文稿

Slidev 支持通过创建多个 Markdown 文件或者使用不同的文件夹来管理多个演示文稿。你可以根据自身需求，灵活运用上述方法来组织和切换不同的 PPT 内容。

# 创建多个 Markdown 文件
touch slides-1.md slides-2.md

# 启动第一个演示文稿
npx slidev slides-1.md

# 启动第二个演示文稿
npx slidev slides-2.md

采用文件夹分类管理演示文稿

# 项目结构示例
my-slides/
├── presentation-1/
│   └── slides.md
├── presentation-2/
│   └── slides.md
└── package.json

启动后，Slidev 会提供以下访问地址：

  • 公开演示：http://localhost:3031/
  • 演讲者模式：http://localhost:3031/presenter/
  • 幻灯片概览：http://localhost:3031/overview/
  • 导出选项：http://localhost:3031/export/

主要功能：

  • 自动打开浏览器预览
  • 支持热重载（修改文件后自动刷新）
  • 提供演讲者模式（包含计时器和笔记）
  • 支持远程控制（需要额外参数）

项目结构说明

使用 pnpm 创建项目后，会自动生成以下文件:

slidev-demo/
├── slides.md          # 主要的演示文稿文件，包含所有幻灯片内容
├── package.json       # 项目配置和依赖管理
├── package-lock.json  # 依赖版本锁定文件
├── node_modules/      # 项目依赖包目录
├── components/        # Vue 组件目录，用于自定义组件
├── pages/            # 页面组件目录
├── snippets/         # 代码片段目录
├── .gitignore        # Git 忽略文件配置
├── .npmrc           # npm 配置文件
├── netlify.toml      # Netlify 部署配置
├── vercel.json       # Vercel 部署配置
└── README.md         # 项目说明文档

主要文件说明:

  • slides.md：核心文件，使用 Markdown 编写幻灯片内容的所在地
  • package.json：定义项目依赖和脚本命令
  • components/：存放自定义 Vue 组件
  • pages/：存放页面级组件
  • snippets/：存放可重用的代码片段
  • 部署配置：
    • netlify.toml：用于 Netlify 平台部署
    • vercel.json：用于 Vercel 平台部署

和 presentation 相关的基本使用语法

1. 创建幻灯片

在 slides.md 文件中，使用 --- 分隔符来创建新的幻灯片：

# 第一页

---

# 第二页

---

# 第三页

2. 添加代码块

```python
def hello():
    print("Hello, Slidev!")
```

3. 使用主题

在 frontmatter 中设置主题：

---
theme: default
---

高级特性

1. 动画效果

点击动画 (Click Animations)

使用 v-click 指令为元素添加点击动画：

<div v-click>
  这段文字会在点击后显示
</div>

<!-- 使用 v-mark 添加内联标记 -->
<span v-mark.red>红色标记</span>
<span v-mark.circle.orange>橙色圆圈标记</span>

运动动画 (Motion Animations)

使用 v-motion 指令创建运动效果：

<div
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }"
  :click-3="{ x: 80 }"
  :leave="{ x: 1000 }"
>
  动画文本
</div>

2. 代码展示

代码高亮与行号

```ts {1|2|3} twoslash
// 显示第1、2、3行
const hello = "world"
console.log(hello)
```

Monaco 编辑器集成

// 可编辑的代码块
const code = "editable"

// 可执行的代码块
console.log("Hello from Monaco!")

3. 图表与数学公式

Mermaid 图表

```mermaid
sequenceDiagram
    Alice->John: Hello John
    John->Alice: Hi Alice
```

LaTeX 数学公式

行内公式：

$\sqrt{3x-1}+(1+x)^2$

块级公式：

$$
\begin{aligned}
\nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0}
\end{aligned}
$$

4. 布局与主题

双列布局

---
layout: two-cols
---

# 左列内容

::right::

# 右列内容

图片布局

---
layout: image-right
image: https://example.com/image.jpg
---

# 带图片的幻灯片

5. 交互组件

可拖拽元素

<!-- 使用指令 -->
<img v-drag="'square'" src="image.png">

<!-- 使用组件 -->
<v-drag>
  <div>可拖拽的内容</div>
</v-drag>

<!-- 可拖拽箭头 -->
<v-drag-arrow two-way />

6. 演讲者模式

在每页幻灯片的最后添加注释块，这些内容只会在演讲者模式中显示：

<!--
这是演讲者笔记
- 要点1
- 要点2
-->

7. 自定义样式

在幻灯片中使用 <style> 标签添加自定义样式：

<style>
h1 {
  background-color: #2B90B6;
  background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>

8. 前置配置详解

在 slides.md 文件开头使用 YAML 格式配置全局设置：

---
# 主题设置
theme: seriph

# 背景图片
background: https://cover.sli.dev

# 幻灯片信息
title: Welcome to Slidev
info: |
  ## Slidev Starter Template
  Presentation slides for developers.

# 应用样式类
class: text-center

# 绘图功能
drawings:
  persist: false

# 幻灯片过渡效果
transition: slide-left

# 启用 MDC 语法
mdc: true
---

劣势

  1. 学习门槛较高
    • 需掌握 Markdown 扩展语法、基础前端知识（CSS/Vue），非技术用户上手困难。
    • 复杂布局需手动编写 HTML/CSS（如多栏排版），不如 PPT 拖拽直观。
    • 缺乏可视化编辑界面，需要直接编写代码，对非程序员不友好。
  2. 功能局限性
    • 导出问题：
      • PDF 导出时内部链接失效，影响演示体验
      • 导出的 PPTX 为图片嵌入，无法二次编辑
      • 不支持导出为其他主流演示格式（如 Keynote）
    • 动画与交互限制：
      • 自定义动画效果有限，不如 PowerPoint 丰富
      • 复杂交互需要编写 Vue 组件，开发成本高
      • 缺乏现成的动画模板和过渡效果库
  3. 协作与兼容性
    • 协同编辑限制：
      • 依赖 Git 或在线 IDE（如 StackBlitz、Vercel）
      • 需要团队成员具备开发环境配置能力
      • 实时协作功能不如 Google Slides 等在线工具
    • 格式兼容性：
      • 不支持导入现有 PPTX 文件，迁移成本高
      • 与主流办公软件（Office、WPS）不兼容
      • 导出格式有限，难以满足多样化需求
    • 离线使用：
      • 完整功能依赖本地开发环境
      • 在线编辑需要稳定的网络连接
      • 移动端支持有限，不适合随时编辑
  4. 性能与资源消耗
    • 开发服务器占用系统资源较多
    • 大型演示文稿可能导致浏览器性能下降
    • 依赖 Node.js 环境，对系统要求较高
  5. 生态系统
    • 插件生态不如传统演示软件丰富
    • 主题和模板数量有限
    • 社区支持相对较小，问题解决渠道有限

Light way to convert markdown to slides: marp.

Let's make the world better, because every small effort counts.
(Click it and come back to see the full content)
支持公益 ❤

You May Also Enjoy