2023-02-06

建立簡報的工具 - Slidev 的介紹

去年(2022 年) 11 月的時候，需要建立簡報向同事介紹 Angular 基礎，之前都是使用 Google 簡報或是 PowerPoint 來製作，但是發現有個缺點，對程式碼不夠有善。接著我想起在 GitHub Stars 中儲存一些簡報用的專案，其中發現 Slidev ，覺得簡單易用，就決定採用了，現在分享給大家參考看看。

安裝

npm init slidev

可以參考官方網站，輸入上列的指令建立初始樣版。

如上圖，輸入簡報名稱後，即會安裝相依的套件。

之後會開啟範例網站 http://localhost:3030 。可以確認一下 Slidev 的功能有那些。

建立簡報

根據文件，進入點是 slides.md，一切的簡報這邊即可。

# Slidev

Hello World

---

# Page 2

Directly use code blocks for highlighting


``` ts
console.log('Hello, World!')
```

---

# Page 3

而內容格式如上，看起來一目了然，都是很基本的 markdown 語法就可以建立簡報了。

另外為了便於建立簡報，可以安裝 Slidev VSCode Extension。

這樣子就可以列表目前的簡報，及目前所選擇簡報的預覽圖

程式碼

```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)
}

接著就是我選擇 Slidev 的原因之一，可以 Highlight 程式碼，如同上面的格式，參考文件，在後方加上程式碼的行號 {all|2|1-6|9|all}，即可顯示 Highlight 的程式碼。

之後就像是上方的圖片，可以配合簡報強調特定行數的程式碼。

PDF

npm i -D playwright-chromium

另外還可以匯出成 PDF，就需要安裝 playwright-chromium ，可以參考文件 。

slidev export

接著輸入指令export 即可匯出 PDF。

結論

Slidev 是很好使用的工具，搭配 VSCode Exntension ，能快速輕鬆建立起簡報。而簡報所需的功能都有具備，推薦給大家參考看看。