本期推荐的是一个为开发者打造的演示文稿工具——Slidev。
Slidev是基于 Web 的幻灯片制作和演示工具。它旨在让开发者专注在 Markdown 中编写内容，同时拥有支持 HTML 和 Vue 组件的能力，并且能够呈现像素级完美的布局，还在你的演讲稿中内置了互动的演示样例。Slidev使用了功能丰富的 markdown 文件来生成精美的幻灯片，具有即时重载的体验。同时它还拥有很多内置的集成功能，如实时编码、导出 PDF、演讲录制等。
功能特性
- Markdown 支持 —— 使用你最喜欢的编辑器和工作流编写 Markdown 文件
- 开发者友好 —— 内置代码高亮、实时编码等功能
- 可定制主题 —— 以 npm 包的形式共享、使用主题
- 灵活样式 —— 使用 Windi CSS 按需使用的实用类和易用的内嵌样式表
- 可交互 —— 无缝嵌入 Vue 组件
- 演讲者模式 —— 可以使用另一个窗口，甚至是你的手机来控制幻灯片
- 绘图 —— 在你的幻灯片上进行绘图和批注
- LaTeX 支持 —— 内置了对 LaTeX 数学公式的支持
- 图表支持 —— 使用文本描述语言创建图表
- 图标 —— 能够直接从任意图标库中获取图标
- 编辑器 —— 集成的编辑器，或者使用 VS Code 扩展
- 演讲录制 —— 内置录制功能和摄像头视图
- 跨平台 —— 能够导出 PDF、PNG 文件，甚至是一个可以托管的单页应用
- 快速 —— 基于 Vite 的即时重载
- 可配置 —— 支持使用 Vite 插件、Vue 组件以及任何的 npm 包
技术栈
- Vite —— 一款极速的前端工具
- 基于 Vue 3 的 Markdown —— 专注内容的同时，具备 HTML 和 Vue 组件的能力
- Windi CSS —— 按需、实用类优先的 CSS 框架，轻松定制你的幻灯片样式
- Prism, Shiki, Monaco Editor —— 具有实时编码能力的一流代码片段支持
- RecordRTC —— 内置录制功能和摄像头视图
- VueUse 家族 —— vueuse/core、vueuse/head、vueuse/motion 等
- Iconify —— 图标库集合
- Drauu —— 支持绘图和批注
- KaTeX —— LaTeX 数学渲染
- Mermaid —— 文本描述语言创建图表
本地安装
使用 NPM：
$ npm init slidev使用 Yarn：
$ yarn create slidev启动构建命令：
{
"scripts": {
"dev": "slidev", // 启动 dev server
"build": "slidev build", // 构建生产环境的单页面应用
"export": "slidev export" // 将幻灯片导出为 pdf 格式
}
}访问：
http://localhost:3030/示例
幻灯片通过 一个 markdown 文件 编写而成 (默认会使用 ./slides.md)。
你可以像平时编写 markdown 一样使用 Markdown 的相关特性，同时还支持内联的 HTML 和 Vue 组件。也支持使用 Windi CSS 来编写样式。使用 — 添加分隔符来分隔你的幻灯片。
# 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>扉页及布局
你可以通过将分隔符转换为 扉页块 (front matter)，为每张幻灯片指定布局 (layout) 和其他元数据。每个扉页信息都以分隔符 — 开始，以另一个分隔符 — 结束。两个分隔符之间的文本是 YAML 格式的数据对象。具体示例如下：
---
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.代码块
建立 Slidev 一个非常重要的原因就是为了让代码在幻灯片中拥有正确的高亮。如你所见，你可以使用 Markdown 风格的代码块，以使得你的代码高亮。
```ts
console.log('Hello, World!')
```特定行高亮
如需针对特定行进行高亮展示，只需在 {} 内添加对应的行号。行号从 1 开始计算。
```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))
}
```这段代码会先对 a: Ref<number> | number 和 b: Ref<number> | number 进行高亮展示，当你点击幻灯片后，会高亮展示 return computed(() => unref(a) + unref(b))，最后，会对整个块进行高亮展示。你可以在 动画指南 中了解更多。
—END—
开源协议：MIT
