前言
和这篇文章一样，我就是用Markdown写的。相信各位平时也就用Markdown写写文档，做做笔记，转成XHtml、Html等，今天教大伙一招骚操作：用Markdown写PPT。
绝大多数朋友做 PPT都是用的 PowerPoint 或者 KeyNote 吧？功能是比较强大，但你有没有遇到过这样的痛点：
- 各种标题、段落的格式不统一，比如字体大小、行间距等等各个页面不太一样，然后得用格式刷来挨个刷一下。
- 想给 PPT 做版本控制，然后就保存了各种复制版本，比如“一版”、“二版”、“终版”、“最终版”、“最终不改版”、“最终稳定不改版”等等，想必大家都见过类似这样的场景吧。
- 想插入代码，但是插入之后发现格式全乱了或者高亮全没了，然后不得不截图插入进去。
想插入个公式，然后发现 PPT、Keynote 对 Latex 兼容不太好或者配置稍微麻烦，就只能自己重新敲一遍或者贴截图。 - 想插入一个酷炫的交互组件，比如嵌入一个微博的网页页面实时访问、插入一个可以交互的组件、插入一个音乐播放器组件，原生的 PPT 功能几乎都不支持，这全得依赖于 PowerPoint 或者 KeyNote 来支持才行。
如果你遇到这些痛点，那请你一定要看下去。如果你没有遇到，那也请你看下去吧。
好，说回正题，我列举了那么多痛点，那这些痛点咋解决呢？
能！甚至解决方案更加轻量级，那就是用 Markdown 来做 PPT！
你试过用 Markdown 写 PPT 吗？没有吧，试试吧，试过之后你就发现上面的功能简直易如反掌。
具体怎么实现呢？
接下来，就有请今天的主角登场了！它就是——Slidev。
什么是 Slidev？
简而言之，Slidev 就是可以让我们用 Markdown 写 PPT 的工具库，基于 Node.js、Vue.js 开发。
利用它我们可以简单地把 Markdown 转化成 PPT，而且它可以支持各种好看的主题、代码高亮、公式、流程图、自定义的网页交互组件，还可以方便地导出成 pdf 或者直接部署成一个网页使用。
安装和启动
下面我们就来了解下它的基本使用啦。
首先我们需要先安装好 Node.js，推荐 14.x 及以上版本，安装方法见这里
接着，我们就可以使用 npm 这个命令了。
然后我们可以初始化一个仓库，运行命令如下：
npm init slidev@latest这个命令就是初始化一个 Slidev 的仓库，运行之后它会让我们输入和选择一些选项，如图所示：
比如上图就是先输入项目文件夹的名称，比如这里我取名叫做 slidevtest。
总之一些选项完成之后，Slidev 会在本地 3000 端口上启动，如图所示：
接着，我们就可以打开浏览器 http://localhost:3000 来查看一个 HelloWorld 版本的 PPT 了，如图所示：
我们可以点击空格进行翻页，第二页展示了一张常规的 PPT 的样式，包括标题、正文、列表等，如图所示：
那这一页的 Markdown 是什么样的呢？其实就是非常常规的 Markdown 文章的写法，内容如下：
# What is 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://sli.dev/guide/why)是不是？我们只需要用同样格式的 Markdown 语法就可以轻松将其转化为 PPT 了。
使用技巧
快捷键操作
再下一页介绍了各种快捷键的操作，这个就很常规了，比如点击空格、上下左右键来进行页面切换，如图所示：
更多快捷键的操作可以看这里，一些简单的快捷键列举如下：
- f：切换全屏
- right / space：下一动画或幻灯片
- left：上一动画或幻灯片
- up：上一张幻灯片
- down：下一张幻灯片
- o：切换幻灯片总览
- d：切换暗黑模式
- g：显示“前往...”
代码高亮
接下来就是代码环节了，因为 Markdown 对代码编写非常友好，所以展示自然也不是问题了，比如代码高亮、代码对齐等都是常规操作，如图所示：
那左边的代码定义就直接这么写就行了：
# Code
Use code snippets and get the highlighting directly![^1]
_```ts {all|2|1-6|9|all}
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)
}
_```由于是 Markdown，所以我们可以指定是什么语言，比如 TypeScript、Python 等等。
网页组件
接下来就是非常酷炫的环节了，我们还可以自定义一些网页组件，然后展示出来。
比如我们看下面的一张图。左边就呈现了一个数字计数器，点击左侧数字就会减 1，点击右侧数字就会加 1；另外图的右侧还嵌入了一个组件，这里显示了一个推特的消息，通过一个卡片的形式呈现了出来，不仅仅可以看内容，甚至我们还可以点击下方的喜欢、回复、复制等按钮来进行一些交互。
这些功能在网页里面并不稀奇，但是如果能做到 PPT 里面，那感觉就挺酷的。
那这一页怎么做到的呢？这个其实是引入了一些基于 Vue.js 的组件，本节对应的 Markdown 代码如下：
# ComponentsYou can use Vue components directly inside your slides. We have provided a few built-in components like `` and ` ` that you can use directly. And adding your custom components is also super easy.
Check out [the guides](https://sli.dev/builtin/components.html) for more.
