🫡HI大家好：我是子禛。 😊😊😊

技术从业人员更多善于逻辑思维能力的推敲，而不善于对自己所做的研究成果进行汇报。特别是在年终述职的时候，我们常常会因为表现不足而导致，领导对我们的工作并不是那么认可。我分析了下面几点。

想要表达的内容实现不出来
- 比起PPT或keyNote而言，我们更多接触的是markdown格式的文件。
- 比起WPS等工具，我们更擅长使用编辑器。
对于代码我们有严重的强迫症，但是ppt没有
- 编码时，我们对于代码的缩进，页面是否对齐，元素是否对齐，有着很严重的强迫症。但是我们不回去关心ppt是否对齐到最佳位置。（职业病）
时间成本
- 我们写一篇markdown远远比，写一个PPT更为快速。

下面我们将要学习的内容，我们来看看具有何等表现力

怎么样，有点像苹果的发布会报告，是的。这种简约风，能够让我们更清晰的表达出我们的观点，让下面汇报倾听者，把更多的注意力集中在汇报人的身上。（为了更具的讲述，我会结合官网为大家进行分享）

Slidev

它使用了功能丰富的 markdown 文件来生成精美的幻灯片，具有即时重载的体验。它还拥有很多内置的集成功能，如实时编码、导出 PDF、演讲录制等。由于 Slidev 是由 web 驱动的，因此你可以使用它进行任何操作 ------ 具有无限的可能性。

📝 Markdown 支持 ------ 使用你最喜欢的编辑器和工作流编写 Markdown 文件
🧑‍💻 开发者友好 ------ 内置代码高亮、实时编码等功能
🎨 可定制主题 ------ 以 npm 包的形式共享、使用主题
🌈 灵活样式 ------ 使用 Windi CSS 按需使用的实用类和易用的内嵌样式表
🤹 可交互 ------ 无缝嵌入 Vue 组件
🎙 演讲者模式 ------ 可以使用另一个窗口，甚至是你的手机来控制幻灯片
🎨 绘图 - 在你的幻灯片上进行绘图和批注
🧮 LaTeX 支持 ------ 内置了对 LaTeX 数学公示的支持
📰 图表支持 ------ 使用文本描述语言创建图表
🌟 图标 ------ 能够直接从任意图标库中获取图标
💻 编辑器 ------ 集成的编辑器，或者使用 VS Code 扩展
🎥 演讲录制 ------ 内置录制功能和摄像头视图
📤 跨平台 ------ 能够导出 PDF、PNG 文件，甚至是一个可以托管的单页应用
⚡️ 快速 ------ 基于 Vite 的即时重载
🛠 可配置 ------ 支持使用 Vite 插件、Vue 组件以及任何的 npm 包

项目搭建

npm 复制代码

 yarn create slidev
 
 或者
 
 npm init slidev

这样完美就创建了一个项目，下面我们来把想法转会为现实。幻灯片通过 一个 markdown 文件 编写而成 (默认会使用 ./slides.md)。来进行书写

项目结构

node 复制代码

your-slidev/
  ├── components/       # 自定义组件
  ├── layouts/          # 自定义布局
  ├── public/           # 静态资源
  ├── setup/            # 自定义 setup / hooks
  ├── styles/           # 自定义样式
  ├── index.html        # 注入的 index.html
  ├── slides.md         # 幻灯片主入口
  └── vite.config.ts    # 扩展 vite 配置

使用（markdown）

在这一段内，我只会介绍一下拓展和补充的东西，对于那个原本与markdown使用没有什么差别的不会做过多赘述。请各位小伙伴自行查阅官网。

扉页块

因为是在一个markdown文件编辑所有页面，因此区分当前内容是哪一页的，就需要使用"---" 分隔符来把页面分块，分出来的就是扉页块。同时页面的各种配置也需要在扉页块中进行配置，具体内容请查看扉页配置章节

js 复制代码

---
layout: cover
---

# Slidev

This is the cover page.

---
layout: center
background: './images/background-1.png'
class: 'text-white'
---

# Page 2

This is a page with the layout `center` and a background image.

---

# Page 3

This is a default page without any additional metadata.

代码块

在silder中进行代码块的编写和markdown没有区别，但是silder在此基础上进行了补充。

可以指定任意一行代码高亮。

js 复制代码

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

会对第二行第三行实现代码高亮如下图

那么我们如果想让代码依次高亮，我们需要使用到|或运算。

ts 复制代码

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

下面我们直接看图片就可以理解。先展示2-3行，再展示第5行，再展示全部。对于我们技术人员进行汇报，真的非常友好。

可以使用Monaco 编辑器对代码进行编辑

ts 复制代码

```ts {monaco}
interface User {
  id: number
  firstName: string
  lastName: string
  role: string
}

function updateUser(id: number, update: User) {
  const user = getUser(id)
  const newUser = { ...user, ...update }
  saveUser(id, newUser)
}
```

我们来看看效果。

我们可以直接进行代码的编辑

项目备注

再ppt中我们也尝试用注释来帮助我们想起页面的对应内容。在slidev是如何添加注释的。

yaml 复制代码

---
layout: cover
---

# 第 1 页

This is the cover page.

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

---

就是html的注释，注意注释必须放在当前页面的最后一行,并且注释只有在演讲者模式中才能看到。点击导航面板上的按钮，或者手动访问 http://localhost:3030/presenter 地址，即可进入演讲者模式。每当你进入演示者模式，其他页面实例会自动与演示者保持同步。

当然还有很多配置，官网写的很详细了，在此我就不做过多的赘述。下面我们再说回关于slide对数值ppt的提升问题。

可以导出成为PPT

再汇报完成后，根据部门管理条例，一般会整理所有人的PPT然后，发送给上一层、或同层相关人员。那么我们如何把slidev变成一个PPT进行上交呢？

导出为 PDF 或 PNG 的功能基于 Playwright 实现渲染。因此，使用此功能前需要安装 playwright-chromium。如果你需要在 CI 环境下进行导出，那么阅读 playwright CI 指南会对你有所启发。安装 playwright-chromium：

css 复制代码

$ npm i -D playwright-chromium

接着，使用如下命令即可将你的幻灯片导出为 PDF：

shell 复制代码

$ slidev export

稍作等待，即可在 ./slides-export.pdf 路径下看到你幻灯片的 PDF 文件。

如果你想要导出使用暗色主题的幻灯片，请使用 --dark 选项：