🫡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
选项:
shell
$ slidev export --dark
总结
上面所描述的,有没有说到你的痛点呢?
同时是否为你的痛点提供了新的解决思路呢?
当然上述内容不够全面,篇幅太长怕大家看着很累。对于想要深入学习的可以去官网自主学习。想要偷懒的同学呢,评论区@我,子禛来帮你们深入学习,然后分享给大家一个全流程快速上手攻略。