Slidev:从Markdown生成PPT

Introduction

slidev是一款为开发者提供的PPT工具，它允许我们通过编写Markdown来快速生成PPT。结合一定的CSS语法以及社区主题，slidev也能够完成非常精美的PPT。更重要的是程序员对Markdown更为熟悉，同时使得后续的复用变得非常简单。

还有类似的工具例如Reveal.JS，利用Advanced Slide插件结合Obsidian也是一种常见的解决方案。

slidev提供多种安装方式，这里推荐全局安装，之后在任意目录下都可以直接使用slidev命令。

1
npm i -g @slidev/cli

安装完成之后，我们可以快速编写一个slidev-slide.md，然后通过slidev命令就可以进行PPT的生成。该命令基于对应的md文件在本地启动一个server，默认通过访问http://localhost:3030可以在浏览器中进行PPT的访问。

1
slidev slidev-slide.md

虽然slidev是基于Markdown的，但是它的语法规则与标准的Markdown渲染规则还是略有差异，因此在使用slidev的时候，在对应的Markdown编辑器中建议开启源码模式。

Tips

slidev的官方文档地址为：Getting Started|sli.dev。该文档已经非常详细了，日常使用都可以参考该文档。这里仅记录本人在使用过程中的一些小tips，以供快速fix。

CSS修改

slidev对于markdown的转换有一套默认的风格，但是由于Markdown天然支持html，因此我们可以按照想要的方式对内容进行样式设计。可以参考配置Windi CSS|slidev。通过这种方式，我们可以很方便地进行样式改变。下面举一些例子。

一个最简单的操作，我们可以为一段文本指定背景颜色，指定边框等。只需要利用<div>标签将对应文本块进行包裹，然后在class中指定对应的style，这里的风格指定可以参考Windi CSS提供的相关工具Utilites。

1
2
3
<div class="bg-gray-500/50 border-5">
some text...
</div>

slidev中的代码块，在展示模式下，如果其中的内容过多，超出高度的时候，默认行为是隐藏。此时我们可以通过CSS修改来解决该问题，主要需要指定代码块元素的高度以及overflow的行为：

1
2
3
4
5
<div class="h-40 overflow-scroll">
```html
too long code in here...
```
</div>

在Monaco编辑模式下，可以通过指定高度来解决隐藏问题：

1
2
3
```html{monaco} {height:100px}
too long code in here...
```

还有一个较为常用的是网格grid布局，可以用于在一张PPT中排列多个需要展示的元素。

1
2
<div class="grid grid-cols-4 gap-5 pt-4 -mb6">
</div>

export导出

slidev支持将网页版的PPT导出为pdf格式，此时需要使用slidev export命令。当然在使用之前需要先安装playwright-chromium。对于全局安装的用户来说，这里使用-D安装后可能还是无法使用export。此时可以尝试使用-g进行全局安装。

export默认导出的逻辑是每一张PPT对应一页PDF，如果有动画效果的话，那么可以使用--with-clicks参数，此时多个步骤的PPT会转化为多页PDF，每一页对应一次点击。

icon图标

slidev中直接支持开源图标集的访问，只需要指定<{collection-name}-{icon-name} />即可。图标库可以参考icones和icon-sets.iconify。

不过其中部分icon会显示not found，这点目前还不清楚是什么原因导致的。

左右布局

slidev提供了一个two-cols layout来完成左右布局：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
---
layout: two-cols
---
## 左右布局

### Left

This shows on the left

左边内容

::right::

##  <br/>

###  Right

This shows on the right

右边内容

Acadamic Theme

slidev支持主题theme的快速替换，在社区中有许多高质量的主题可供我们使用。本节主要介绍一个简洁的学术主题acadamic，地址为slidev-theme-academic

可以在顶层的front-matter中直接指定：

1
2
3
---
theme: academic
---

一个slidev theme的使用主要是看它提供的各种layout如何使用。acadamic theme提供了如下layout可供使用，下面逐一介绍。

  1. cover 封面页
  2. table-of-contents 目录页
  3. index 列表页
  4. figure 单图片页面
  5. figure-side 单侧图片页面
  6. center 文字居中页面

cover

cover页面的front-matter中重要属性如下：

1
2
3
4
5
6
7
8
9
10
---
layout: cover
class: text-white
coverAuthor: EverNorif # 作者名称
coverAuthorUrl: https://evernorif.github.io/about/ # 作者跳转链接
coverBackgroundUrl: background.jpg # 背景图片，存放在public目录下
coverBackgroundSource: unsplash # 右下角参考图片名称
coverBackgroundSourceUrl: xxx # 点击参考图片跳转链接
title: hello world with academic in slidev  # 整个PPT的名称，会出现在标签栏中
---

table-of-contents

  • 目录页面，在formatter中指定layout为 table-of-contents

  • 会自动检测所有标题，包含封面和结束页面；也会自动检测页面之间的层级关系

index

列表页面index的front-matter如下：

1
2
3
4
5
6
7
---
layout: index
indexEntries:
- { title: "GitHub", uri: "https://github.com/" }
- { title: "Custom Uri", uri: 5 }
indexRedirectType: external
---

列表页面通过formatter中属性来指定indexEntries展示的列表，以及对应的链接。在该页面中可以进行其他内容的书写，最终的列表会添加到页面的最后方。

默认情况下这里的uri只能提供数字，表示要跳转到第几张PPT。此时title将会失效，会被自动解析为对应页面的标题。此时点击跳转是在内部跳转，不会新开一个页面。

如果指定了indexRedirectType为external，那么就可以提供外部链接，且此时title会与我们指定的保持一致。并且即使是写的内部链接跳转，名称也是以提供的为准。不过此时点击跳转会新开一个tab页面。

figure

1
2
3
4
5
6
---
layout: figure
figureCaption: Curated cover image for Slidev
figureFootnoteNumber: 1
figureUrl: https://source.unsplash.com/collection/94734566/1920x1080
---

figure页面通常用来展示一张大图，通常也可以搭配脚注使用。

1
2
3
<Footnotes separator>
  <Footnote :number=1><a href="https://unsplash.com/collections/94734566/slidev" rel="noreferrer" target="_blank">From Anthony Fu's unsplash</a></Footnote>
</Footnotes>

figure-side

1
2
3
4
5
6
---
layout: figure-side
figureCaption: use local image in pubilc folder
figureFootnoteNumber: 2
figureUrl: background.jpg
---

figure-side页面用来在单侧展示一张图片。注意左边的内容会挤占图片的空间，图片会随着空间进行动态调整，可能出现图片被完全挤开的情况。因此需要注意代码块的宽度。当然同样可以搭配脚注使用。

center

1
2
3
4
---
layout: center
class: "text-center"
---

center页面用于将所有的内容都进行居中显示。

杂谈 > 生产力
#slidev
Slidev:从Markdown生成PPT
http://example.com/2023/08/15/Slidev-从Markdown生成PPT/
作者
EverNorif
发布于
2023年8月15日
许可协议