如何用 Markdown 來做 PPT

相信絕大多數朋友做 PPT（幻燈片 / Slides / Deck 等各種稱呼了）都是用的 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 或者直接部署成一個網頁使用。

官方主頁：https://sli.dev/

GitHub：https://github.com/slidevjs/slidev

安裝和啟動

下面我們就來了解下它的基本使用啦。

首先我們需要先安裝好 Node.js，推薦 14.x 及以上版本，安裝方法見 https://setup.scrape.center/nodejs。

接著，我們就可以使用 npm 這個命令了。

然后我們可以初始化一個倉庫，運行命令如下：

npminitslidev@latest

這個命令就是初始化一個 Slidev 的倉庫，運行之后它會讓我們輸入和選擇一些選項，如圖所示：

比如上圖就是先輸入項目文件夾的名稱，比如這里我取名叫做 slidevtest。

總之一些選項完成之后，Slidev 會在本地 3000 端口上啟動，如圖所示：

接著，我們就可以打開瀏覽器 http://localhost:3000 來查看一個 HelloWorld 版本的 PPT 了，如圖所示：

我們可以點擊空格進行翻頁，第二頁展示了一張常規的 PPT 的樣式，包括標題、正文、列表等，如圖所示：

那這一頁的 Markdown 是什么樣的呢？其實就是非常常規的 Markdown 文章的寫法，內容如下：

#WhatisSlidev?

Slidevisaslidesmakerandpresenterdesignedfordevelopers,consistofthefollowingfeatures

-**Text-based**-focusonthecontentwithMarkdown,andthenstylethemlater
-**Themable**-themecanbesharedandusedwithnpmpackages
-**DeveloperFriendly**-codehighlighting,livecodingwithautocompletion
-**Interactive**-embeddingVuecomponentstoenhanceyourexpressions
-**Recording**-built-inrecordingandcameraview
-**Portable**-exportintoPDF,PNGs,orevenahostableSPA
-**Hackable**-anythingpossibleonawebpage






Readmoreabout[WhySlidev?](https://sli.dev/guide/why)

是不是？我們只需要用同樣格式的 Markdown 語法就可以輕松將其轉化為 PPT 了。

快捷鍵操作

再下一頁介紹了各種快捷鍵的操作，這個就很常規了，比如點擊空格、上下左右鍵來進行頁面切換，如圖所示：

更多快捷鍵的操作可以看這里的說明：https://sli.dev/guide/navigation.html，一些簡單的快捷鍵列舉如下：

f：切換全屏

right / space：下一動畫或幻燈片

left：上一動畫或幻燈片

up：上一張幻燈片

down：下一張幻燈片

o：切換幻燈片總覽

d：切換暗黑模式

g：顯示“前往...”

代碼高亮

接下來就是代碼環節了，因為 Markdown 對代碼編寫非常友好，所以展示自然也不是問題了，比如代碼高亮、代碼對齊等都是常規操作，如圖所示：

那左邊的代碼定義就直接這么寫就行了：

#Code

Usecodesnippetsandgetthehighlightingdirectly![^1]

```ts{all|2|1-6|9|all}
interfaceUser{
id:number
firstName:string
lastName:string
role:string
}

functionupdateUser(id:number,update:User){
constuser=getUser(id)
constnewUser={...user,...update}
saveUser(id,newUser)
}
```

由于是 Markdown，所以我們可以指定是什么語言，比如 TypeScript、Python 等等。

網頁組件

接下來就是非?？犰诺沫h節了，我們還可以自定義一些網頁組件，然后展示出來。

比如我們看下面的一張圖。左邊就呈現了一個數字計數器，點擊左側數字就會減 1，點擊右側數字就會加 1；另外圖的右側還嵌入了一個組件，這里顯示了一個推特的消息，通過一個卡片的形式呈現了出來，不僅僅可以看內容，甚至我們還可以點擊下方的喜歡、回復、復制等按鈕來進行一些交互。

這些功能在網頁里面并不稀奇，但是如果能做到 PPT 里面，那感覺就挺酷的。

那這一頁怎么做到的呢？這個其實是引入了一些基于 Vue.js 的組件，本節對應的 Markdown 代碼如下：

#Components

Inline $sqrt{3x-1}+(1+x)^2$

Block
$$
egin{array}{c}


abla 	imes vec{mathbf{B}} -, frac1c, frac{partialvec{mathbf{E}}}{partial t} &
= frac{4pi}{c}vec{mathbf{j}}    
abla cdot vec{mathbf{E}} & = 4 pi 
ho \


abla 	imes vec{mathbf{E}}, +, frac1c, frac{partialvec{mathbf{B}}}{partial t} & = vec{mathbf{0}} \


abla cdot vec{mathbf{B}} & = 0

end{array}
$$

---
layout: cover
---

# 第 1 頁

This is the cover page.

---

# 第 2 頁

The second page

---
theme: seriph
layout: cover
background: 'https://source.unsplash.com/1600x900/?nature,water'
---

---
layout: cover
---

# 第 1 頁

This is the cover page.