slidev：基于 Vite 构建、对开发人员友好地创建演示文稿的工具

slidev^[1] 是一个由 Vite、Vue3、UnoCSS 驱动，支持使用 Vue + Markdown 创建富于表现力的演示文稿的一个工具，开发和使用体验比 Reveal.js^[2] 更好。

官方网址：https://sli.dev/

创建项目

slidev 有提供 create-slidev 包，在命令行执行 pnpm create slidev就能轻松创建并启动一个模板项目。

❝

注意：pnpm 是一个类似 npm 的包管理工具，但更快、更节省硬盘空间。没安装的同学可以通过 npm install -g pnpm 全局安装，使用方式跟 npm 几乎是一样的。

❞

pnpm create slidev

  ●■▲
  Slidev Creator  v0.42.4

√ Project name: ... slidev
  Scaffolding project in slidev ...
  Done.

√ Install and start it now? ... yes
√ Choose the agent » pnpm
...

dependencies:
+ @slidev/cli 0.42.4
+ @slidev/theme-default 0.21.2
+ @slidev/theme-seriph 0.21.3

Done in 9.8s

> slidev@ dev D:learningslidev
> slidev --open



  ●■▲
  Slidev  v0.42.4

  theme       @slidev/theme-seriph
  css engine  unocss
  entry       D:learningslidevslides.md

  public slide show   > http://localhost:3030/
  presenter mode      > http://localhost:3030/presenter/
  remote control      > pass --remote to enable

  shortcuts           > restart | open | edit

默认会打开 http://localhost:3030/ 看到预览效果，访问 http://localhost:3030/presenter/ 进入演讲者模式。还能通过 r（restart）、o（open）、e（edit）快捷指令操作。

运行原理

slidev 会自动读取项目根目录下的 slides.md 文件，作为演示文件入口。学会使用 Markdown 语法差不多就足够使用了。

Markdown 语法

我们先来一个简单的，包含 3 页 PPT 的演示文稿：


# Slidev

Hello, World!

---

# Page 2

Directly use code blocks for highlighting

```ts
console.log('Hello, World!')
```

---

# Page 3

You can directly use Windi CSS and Vue components to style and enrich your slides.

<div class="p-3">
  <Tweet id="20" />
</div>

我们会发现：

使用三个连字符（---）作为每页 PPT 的分隔符
每页 PPT 都由一个单独大标题（# title）
通过 code 添加代码演示
直接使用 HTML 标签 & 自定义/内置组件

我们可以使用 Windi CSS 编写样式，修饰 HTML 标签
内置组件：<Tweet /> 是 slidev 内置一个组件，用来内嵌 Twttier 推文

Front Matter 及布局

Front Matter 是一种设置文档元数据的方式：

---
layout: post
title: Blogging Like a Hacker
---

两个分隔符 --- 之间的文本采用 YAML^[3] 数据格式。

布局是通过 Front Matter 里的 layout 来指定的：

---
layout: cover
---

---
layout: center
---

更多关于 Front Matter 的配置^[4]可以查看这里。

代码块

slidev 代码块有很多丰富的表现功能。包括：语法高亮、高亮特定行、多步骤高亮、Monaco 编辑器

语法高亮

slidev 内建了两种语法高亮器 Prism^[5] 和 Shiki^[6]，默认 Prism，可以在 frontmatter 中修改：

---
highlighter: shiki
---

```ts
console.log('Hello, World!')
```

高亮特定行

```ts {2,3}
function add(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
```

行号之间使用逗号 , 分隔。

多步骤高亮

```ts {2-3|5|all}
function add(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
```

演示到这里的代码时，会分 3 步处理。

首先高亮第 2 到第 3 行（2-3）
然后高亮第 5 行
最后高亮全部代码

Monaco 编辑器

演示文稿时如果需要修改代码，只需在语言 id 后添加 {monaco} 即可。

```ts {monaco}
console.log('HelloWorld')
```

静态资源

和编写 Markdown 的方式一样，你可以使用本地或远程的 URL 的图片。

使用 ![alt](url) 语法或直接使用 <img />：

![Remote Image](https://sli.dev/favicon.png)
![Local Image](/pic.png)
<img src="/pic.png" class="m-40 h-40 rounded shadow" />

备注

每张幻灯片中的最后一个注释块将被视为备注，仅在演讲者模式中使用。

---
layout: cover
---

# 第 1 页

This is the cover page.

<!-- 这是一条备注 -->

---

# 第 2 页

<!-- 这不是一条备注，因为它在幻灯片内容前 -->

The second page

<!--
这是另一条备注
-->

图标

Markdown 中「直接」访问几乎所有的开源的图标集。图标 ID 遵循 Iconify 的命名规则 {collection-name}-{icon-name}。例如：

使用 Unicons Monochrome^[7]，其规则为 <uim-rocket />
使用 Twemoji^[8]，其规则为 <twemoji-cat-with-tears-of-joy />
使用 SVG Logos^[9]，其规则为 <logos-vue />

<uim-rocket />
<uim-rocket class="text-3xl text-red-400 mx-2" />
<uim-rocket class="text-3xl text-orange-400 animate-ping" />

插槽

一些布局可以使用 Vue 的具名插槽。

例如，在 two-cols 布局^[10] 中，你可以采用左（default 插槽）右（right 插槽）两列的布局方式。

---
layout: two-cols
---

<template v-slot:default>

# Left

This shows on the left

</template>
<template v-slot:right>

# Right

This shows on the right

</template>