用Slidev写你的答辩“PPT”

前言

其实本文的主要内容应该是：用Slidev写我的答辩“PPT”，但用“你”来代替“我”好像就会让标题感觉高大上一些，so……

在前阵子的毕业答辩中，我用 Slidev 而非 PowerPoint 制作了本科毕设pre的幻灯片。一直以来都想写些什么吹捧一下这款工具，这是我迄今为止见过最棒的用 Markdown 制作幻灯片的解决方案，在简洁高效和可定制化之间达到了良好平衡。

说是前阵子，其实只有前面这段话和部分大纲是当时写的。本来计划很快写完这篇文章，但是后来因为一些事情耽搁就鸽到了2023年年末，其中原因无外乎懒加健忘。但为了文章们之间的时序连贯性，还是把它的日期留在2022吧。由于时间间隔实在太久，这篇文章的形态可能和我一开始的预设会有很大出入。在一开始，我计划把这篇文章写成教程，以我使用 Slidev 制作毕业答辩 PPT 的过程展示如何使用 Slidev 来优雅地制作一份起码在我看来还挺高端的幻灯片。但是现在的我已经越来越难以耐下心来写一份详细的教程式文章，这种反差感在我偶尔翻阅自己的早期博文时尤为强烈。可能因为随着年岁的增长，不论是在生活或是技术上都经历着比以往更甚的困难，加上我总有一股不想让自己舒服过日子的冲动在，克服各种难题早已成为家常便饭。很多时候，解决困难的畅快感在我还没有开始动手将它记下时就快速流逝了，这时再写点什么也显得索然无味。所以，这篇文章自言自语的成份可能更甚它在技术上的参考意义。btw，我现在早已不再使用 Slidev 了，可能因为我近来也很少做 PPT 了吧。

在一切开始之前，先给出成品：本人的本科毕设答辩PPT。这个成品与当时答辩时的版本略有一些出入，主要是当时做的校徽背景图不知道放哪里去了（一年多了，中间还换了次电脑，真的很难再找到！而且，我虽然用 git 对代码进行了版本控制，但是我 ignore 了 public/ 文件夹！！！当时苦心研究 .gitignore 的报应终于在快两年后命中了我的眉心😃）

Slidev 基于 mkdown 格式的文稿生成网页版的幻灯片，鼠标移到画面的左下角还会显示一些标注工具，左右方向键可以控制幻灯片的播放，这些都是 Slidev 最基础的使用。话不多说，接下来我们开始进入正题。首先，从 mkdown 和 PowerPoint 的对比开始。

Markdown和PowerPoint

mkdown 对 PowerPoint 的区别就一如 mkdown 对 Word，好吧，看上去像句废话；那一如 Latex 对 Word？emmm，大差不差。从原理上而言，应当算是 排版与内容分离 v.s. 不分离。不难想到，咱们伟大的 Latex 当然也可以用来做幻灯片，好像很多搞数学的人就喜欢用 Latex 做幻灯片，毕竟公式友好。作为更有互联网味的排版语言，mkdown 当然有其特性，其中我最欣赏的一点就是它与网页的高度兼容，可以将许多新鲜的前端交互方式插入 PPT 难道不是很酷的事情么？而且这样一来，任何人都可以轻松地与内容进行交互，不必只能通过显式的文件分发。冗余的文件分发真是太无趣了，如果可以选，我更喜欢分享一个网址而不是文件。

印象里第一次在现实中看到有人使用网页版的幻灯片，似乎是在大三下的媒体大数据课上，来教我们 Vue.js 的师兄用了网页驱动的幻灯片讲课。并且课后分享课件的时候，直接给我们分享了网页地址。那一天在我的心里种下种子：太酷了，我也要做网页版的幻灯片！

用Markdown写PPT的N种方法

排版与内容分离的优势此处我不再多做赘述。当排版与内容分离之后，自然可以使用各式页面渲染技术来对内容进行装点。从我开始有意识了解利用 mkdown 写幻灯片后，也发现了不少有意思的工具。因为这篇文章主要聚焦 Slidev，所以其他工具会提得少一些。而且从我计划写这篇文章到真正动笔，中间还有一年多的时间差，也许世界又变了也说不定……

Jupyter Notebook

首先是老朋友 Jupyter，直接在 Jupyter 里用 mkdown 语法编写内容，之后在控制台生成 .html 就可以生成相应的幻灯片了。这可能是从写代码到汇报最快的方式hhh

• 优点：简单、方便，支持上下左右滚动
• 缺点：没有动画、屏幕显示内容少、样式比较丑

丑是原罪，专业的活还是让专业人士干吧！

Slidev

功能更多、动画多、更好看、更自由～等后面具体介绍到幻灯片里的内容，咱再慢慢夸！起码在我22年做毕设pre的时候，它是我见过最好用滴工具

其他

• Marp：美观，但是没有动画，貌似会直接生成PDF
• Mark.show：Powered by Reveal.js，是一款在线应用；可怜的小东西，当我写到这时，点进原网址发现域名已经过期了，可能是不再维护了🙏
• List of markdown presentation tools：有专门的 github 仓库收集了相关工具，感兴趣的话不妨试试

进入正题

哈哈，进入正题 again。现在来详细说说我的幻灯片吧。虽然很多细节我估计已经想不起来了……详细的用法官方文档都会提，我定制自己的幻灯片时也主要是读文档，以及凭借一点微薄的前端知识折腾下样式代码。

我记得我大约是22年3月左右开始了解 Slidev 的，反正3月的时候肯定已经用 Slidev 做过我的第一个幻灯片了。然后就在4月的毕业答辩上正式用了它。其实算是一个比较冲动的决定，因为估计10个答辩的人里11个用的应该都是 PowerPoint or WPS or PDF。在这种正式场合搞一些看上去“出格”的操作可能不是明智的决定，但我还是做了，因为我相信它的某些效果可以暴打 PowerPoint 之流！对，暴打！

做一个简洁的封面

首先就是魔改封面啦，为了更切合毕业答辩的主题，我当时把背景换成了校徽，中间字的白色背景有没有做磨砂效果我已经忘记了🥲而且字体排版啥还尽量往 PowerPoint 的风格上靠（想想有点可笑，为了融入大家，我得装得自己像个老实幻灯片）

哦对！我想起来我应该从第二页开始还把校徽放在左上角，并用分割线分割了一下！可恶啊，我找不到我的图片素材了。它的音容笑貌只能留在我的脑袋里，最是人间留不住，代码数据忘入库！

嵌入表格

简洁是我做pre一贯的风格，没有花哨的动画没有花哨的背景。所以屏幕前的朋友，不必吐槽幻灯片样式的单调，它本因如此。如果觉得单调，就把鼠标移到画面左下角，打开幻灯片的标注工具给它上上色好了（全屏上色更爽）

接下来，我简单介绍一下第6页的表格：把鼠标移上去，选中行的交互功能是不是很眼熟！这是 Jupyter 的表格样式哦～因为 Slidev 自带的表格样式不太符合我的胃口，恰好我看 Jupyter 的表格就很顺眼，于是一个偷梁换柱，哦不对，是兼容并包，get 顺眼的表格交互样式。你让 PDF 或者 PowerPoint 来交互一个我看看😋

嵌入网页

在第12页，我嵌入了一个 echarts.js 画的 graph，因为是直接用 iframe 嵌入的，所以也支持一样的交互方式。配上这个纯白背景，就显得很统一，拖拽节点的时候仿佛它们与页面本就是一体的。不过有一点小小的遗憾，就是现在的这个 graph 不是我答辩时的原图。原图找不到了😭

再嵌入一个网页

在第14页，我又嵌入了一个网页。这个网页更复杂一些，是一个交互式可视化的小工具。在 Select Politician 字段选择 Donald Trump，Start month 和 End month 分别选 2019-07 和 2020-12，再点击 Query。Boom！是不是出现了新东西。至于这个具体是什么东西嘛，可能需要读一下我幻灯片的前面内容哈哈哈

好吧，不卖关子，毕竟这个可视化最初就是为了幻灯片而写的：我通过这个工具可视化一些政要在特定时间内的出行记录

• 红点是他们所属国家的首都，蓝点则是出行地点
• 鼠标移到蓝点上可以显示每次该地点的名字以及每次出行的时间
• 最下面的时间轴可以播放，显示这个政要随时间访问地点的累积情况
• 蓝点还可以双击，跳转到这个样本对应的新闻上下文。因为这个行迹是由深度学习模型基于新闻内容分类得到的（btw，我们的这项工作在23年被ICWSM接收了🥳）

Slidev, yyds!

如果看完了整个幻灯片，应该能感受到 Slidev 比 PowerPoint 之流的强大之处吧！基础的 PowerPoint 效果它都有，也可以导出 PDF；哦对了，Slidev 提供的演讲者模式也很好用。而且还能把它部署成网页，比如我现在用得就是 Github Page 服务，所有人都可以跟它交互，这不是很棒嘛！况且 mkdown 让排版与内容分离，编辑的时候只需要专注内容就可以了，特别适合统一模板的情况下定期制作幻灯片。大约有半年多的时间，我一直都使用 Slidev 来完成组会汇报XD