身为程序员的自己，很多时候也难逃写ppt的厄运，也不能说不会写，只是感觉写起来有点反感，没有用代码撸起来方便。再者就是很少接触word,excel,ppt这些，难免也有些生疏，其次是对于代码块的注释和演示代码类的操作，很难以ppt友好的方式展现出来。

什么是slidev

简单来说就是给开发者提供的装x利器，直接通过书写 markdown 就能变成ppt，也可以通过加一点html,css,vue等实现更多的选择。

当然slidev也为大家提供了默认的ppt 主题模板，不需要你自己去设计样式，可以直接上手。

slidev的优点

市面上也有很多类似slidev生成ppt的插件，但是对比之后，根据文档的维护，功能的丰富多样化，我最终选择了它。

支持多功能导航栏

自带的导航栏可以实现很多丰富的功能。

支持演讲者模式

通过开启演讲者模式，你可以通过把默认的http://localhost:3030地址投屏给到观众查看，而你自己可以在http://localhost:3030/presenter中看到属于你自己的模式，两者之间会根据你的操作实时同步。

在你的模式中可以看到更多的信息，包含演讲时间，每个幻灯片下自己留的注释或备注，下一个幻灯片内容等

支持绘画批注

支持pdf导出

如果哪天你的领导看中了你的ppt，但是领导不会搞代码或者跑程序这些，你可以选择把你的项目部署到服务器上，扔给领导一个URL。

当然，你也可以选择用slidev提供的pdf导出直接生成pdf文件给到领导。（领导一定会感激的给你个大饼🍪）

npm i -D playwright-chromium

npm run export

然后会在你的根目录下生成一个slides-export.pdf，这就是你的🍪了

如何安装slidev

具体安装方法也可以参考官方文档，我这里直接采用官方推荐的初始化模板安装，相当于直接新建一个ppt的项目。

Slidev 需要 Node.js 的版本 >=14.0.0

npm init slidev@latest

npm run dev

🎉大功告成！

如何开始编写你的PPT

通过以上安装方式后，你会在你的根目录下发现slides.md这个就是你后面将要编写的主要文件了，当然slidev在安装成功后会默认给你生成好了一个案例，你可以选择在他的基础上学习和了解，也可以选择重新开始你的ppt🎈。

首先最开始的部分是配置文件，用来确定你的默认主题，标题等。

⚠这里我只把常用的选项列出来了，想了解更多的，可以参考官方提供的配置文件或者github代码配置解释

---
# 主题id 或 主题包名称
# 了解更多：https://cn.sli.dev/themes/use.html#use-theme
theme: 'default'
# 幻灯片的总标题，如果没有指定，那么将以第一张拥有标题的幻灯片的标题作为总标题
title: 'Slidev'
# 在单页（SPA）构建中启用 pdf 下载，也可以指定一个自定义 url
download: false
# 要导出文件的文件名称（好像配置了也不生效）
exportFilename: 'slidev-exported.pdf'
# 语法高亮设置，可以使用 'prism' 或 'shiki' 方案
highlighter: 'prism'
# 在代码块中显示行号
lineNumbers: false
# vue-router 模式，可以使用 'history' 或 'hash' 模式（决定了有没有 #/）
routerMode: 'history'
# favicon 可以是本地文件路径，也可以是一个 URL
favicon: 'https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png'
# 绘制选项
# 了解更多：https://cn.sli.dev/guide/drawing.html#persist-drawings
drawings:
  persist: false
---

搭配插件，写的起飞

VS Code 插件提供一些特性，这些特性可以帮你更好的组织幻灯片并且可以快速浏览。

演讲者模式加注释

<!-- 
* 最后部分的注释可以在演讲模式下只针对你个人展示出来
* 没错，是这样的
* [了解更多](https://sli.dev/guide/syntax.html#notes)
-->

修改首页幻灯背景图

可以直接通过css样式修改

<style>
.slidev-layout.slidev-page-1 {
  background-image:url("/pubilc/page1.jpg") !important;
  color: #5a5a5a !important;
}
p{
    text-transform:uppercase;
}
</style>

官方好像也提供了配置项，但是直接修改，背景还是有点暗暗的(建议直接改样式引入)。不过有时候默认的图片也是很好看的😄

# 首页背景图片
# 提供的精美壁纸 https://source.unsplash.com/collection/94734566/1920x1080
background: /pubilc/page1.jpg

如何导出pdf

通过官方推荐的 slidev export --format pdf不知为何导出来的会有问题，只有1页，而且还是空白的。

解决方式：尝试通过 npm run build 通过静态部署的方式生成pdf到dist中。

首部配置允许单页面部署时，下载pdf，然后npm run build，部署之后可以通过url网址路径 + exported.pdf 即可预览。

---
download: true
exportFilename: exported.pdf
---

注意：当使用iframe引用外部视频类文件时，pdf会导出失败，因为无法转换视频类文件。

<iframe width="300" height="315" src="https://dx2-5g7ghhrr0afe4de1-1309749022.tcloudbaseapp.com/slidev/video1.mp4" frameborder="0" allowfullscreen ></iframe>

Slidev拥有程序员自己的PPT