#设置主题
theme: default

设置背景图片

background: './vx.jpg'

设置样式

class: 'text-center'

https://sli.dev/custom/highlighters.html

highlighter: shiki

是否打开代码行号

lineNumbers: false

使用MarkDown配置slide

info: |

Slidev Starter Template

Presentation slides for developers.

Learn more at Sli.dev

persist drawings in exports and build

drawings:
persist: false

欢迎来到 Slidev 的世界

为开发者打造的slide工具

---

什么是 Slidev?

Slidev 好用好看！
Slidev is a slides maker and presenter designed for developers, consist of the following features

• 📝 Text-based - focus on the content with Markdown, and then style them later
• 🎨 Themable - theme can be shared and used with npm packages
• 🧑‍💻 Developer Friendly - code highlighting, live coding with autocompletion
• 🤹 Interactive - embedding Vue components to enhance your expressions
• 🎥 Recording - built-in recording and camera view
• 📤 Portable - export into PDF, PNGs, or even a hostable SPA
• 🛠 Hackable - anything possible on a webpage

Read more about Why Slidev?

---

后续省略...

效果：

![首页（修改了背景和标题）](https://phyger.oss-cn-chengdu.aliyuncs.com/picture/2022-1-21/1642758056795-image.png)

![第二页（文本展示）](https://phyger.oss-cn-chengdu.aliyuncs.com/picture/2022-1-21/1642755668805-image.png)

`Slidev` 也支持代码展示，图片，视频，`Latex`，<!--StartFragment-->`mermaid`<!--EndFragment-->，所有 `Markdown` 支持的，更多的，`Slidev` 还支持自定义 `Vue` 组件和动画。简直强大。

### 菜单功能一览

在预览 `slide` 的时候，我们的鼠标在左下角 `hover` 可以调出菜单栏，其可以实现全屏，前进后退，`slides` 缩略图，黑暗模式，录屏，标记，编辑模式，文本信息，缩放等功能。

![菜单栏](https://phyger.oss-cn-chengdu.aliyuncs.com/picture/2022-1-21/1642756626626-image.png)

### 导出 Demo


> 导出依赖 `playwright-chromium`，我们首先得安装 `playwright-chromium`。

安装命令：`npm i playwright-chromium`

导出命令：`npx slidev export`

![导出过程](https://phyger.oss-cn-chengdu.aliyuncs.com/picture/2022-1-21/1642757036893-image.png)

![导出的pdf文档](https://phyger.oss-cn-chengdu.aliyuncs.com/picture/2022-1-21/1642757064299-image.png)

![导出的pdf效果](https://phyger.oss-cn-chengdu.aliyuncs.com/picture/2022-1-21/1642758263162-image.png)

## 总结

`slidev` 是一个可以打造高保真，高度自定义，页面美观，完全兼容 `MarkDown` 的 `slide` 的优秀工具。墙裂建议大家去尝试下。

> `slidev` 官网（`sli.dev`）