在 VS Code 上使用 Markdown 快速製作簡報

以前在 PowerPoint、Google 簡報(Google Slides) 上面製作簡報最麻煩的就是排版和配色，再來就是遇到程式碼了，每次開工前都要花時間找模板，如果遇到要呈現程式碼，通常都是在編輯器中寫好，然後連格式配色一起複製，不過就很難再修改了，都要回到編輯器改完再全部複製，非常花時間。

身為軟體工程師沒有那麼在意一定要用到最好的配色、最流暢的動畫，我只想要快速做完要報告的內容，然後繼續寫我的程式，畢竟我們最重要的是內容不是嗎？

後來發現了 Marp，使用 Markdown 語法快速製作簡報，只是 Marp 官網沒有詳細範例(持續增加中)，就一直沒有花時間熟悉，最近越來越常開會，於是才下定決心練習一下。

安裝

先開啟 VS Code，安裝 Marp for VS Code 套件

基礎語法

建立檔案和預覽

建立第一個檔案，副檔名為 .md ，在開頭加入下面這三行以設定為 Marp 簡報

    
---
marp: true
---

點擊右上角的放大鏡+書本的按鈕即可預覽

換頁

使用三個減號即可換頁

---

主題

有三種預設主題：default, uncover, gaia ，需要放在一開始的定義區塊中

    
---
marp: true
theme: default 
# theme: uncover
# theme: gaia
---

嗯... 都還好

不過還可以加上 class: invert 讓顏色反轉：

    
---
marp: true
theme: default 
# theme: uncover
# theme: gaia
class: invert
---

如果還是不喜歡，可以使用 css 自訂樣式

自訂樣式

全域 css

    
---
marp: true
style: |
    section {
        background-color: #25003e;
    }

    h1 {
        font-size: 100px;
        color: #ffffff;
    }
---

使用註解自訂樣式

本頁和後續頁面：

    
---
marp: true
---
# 第一頁
---
<!-- backgroundColor: #25003e -->
# 第二頁
---
# 第三頁

前面加上底線就可以僅限當前頁面

    
---
marp: true
---
# 第一頁
---
<!-- _backgroundColor: #25003e -->
# 第二頁
---
# 第三頁

其他範例：

    
<!-- _backgroundColor: #25003e -->
<!-- _color: #0ff058-->
<!-- _fontSize: 100px-->

使用 style 自訂樣式

本頁和後續頁面：

    
---
marp: true
---
# 第一頁
---
<style>
h1 {
  color: red;
  font-size: 100px;
}
</style>
# 第二頁
---
# 第三頁

前面加上 scoped 就可以僅限當前頁面

    
---
marp: true
---
# 第一頁
---
<style scoped>
h1 {
  color: red;
  font-size: 100px;
}
</style>
# 第二頁
---
# 第三頁

其他範例：

    
<style>
    section{
        background-color: #25003e;
    }
    
    h1 {
        color: #15a50e;
        font-size: 100px;
        text-align: center;
    }
    
    h2{
        font-size: 60px;
    }
    
    ul, ol {
        font-size: 50px;
    }

    p {
        font-size: 30px;
        text-align: right;
    }
</style>

圖片

圖片種類眾多，直接放上基礎使用範例

    
---
marp: true
class: invert
---
<style>
    h1 {
        font-size: 90px;
    }
    
    h2{
        font-size: 60px;
    }
</style>

# 第一頁
![](ruyut.png) <!-- 會蓋住文字 -->

---
# 第二頁<br/>背景圖片
![bg](ruyut.png) <!-- 背景圖片，不會蓋住文字 -->

---
# 第三頁<br/>自動縮放的背景圖片
![bg contain](ruyut.png)  <!-- 背景圖片，不會蓋住文字 且自動縮放 -->

---
# 第四頁 自訂大小
![w:300 h:300](ruyut.png) <!-- 自訂大小 -->

---
# 第五頁
## 橫向排列

<style scoped>
    h2{
        color: #ffffff;
        text-shadow:
            -1px -1px 0 #000000,
            1px -1px 0 #000000,
            -1px 1px 0 #000000,
            1px 1px 0 #000000;
    }
</style>
![bg](ruyut.png)
![bg](ruyut.png)
![bg](ruyut.png)
![bg](ruyut.png)

---
# 第六頁
## 直向排列
![bg vertical](ruyut.png)
![bg](ruyut.png)

---
# 第七頁
## 圖片在左
![bg left](ruyut.png)

---
# 第八頁
## 圖片在右
![bg right](ruyut.png)

---
# 第九頁
## 圖片在左側 30%<br/>且限制高度
![bg left:30% h:400](ruyut.png)

---
# 第十頁
## 使用假圖片限制高度<br/>做出角落浮水印

![bg h:100](null)
![bg vertical left:20% h:300](ruyut.png)

清單

在 Markdown 中清單有兩種，使用米字號和減號的，使用米字號的清單在 HTML 檢視時會像是有動畫一樣，每下一步顯示一項，而減字號的清單則是同時出現

    
# 逐個出現的清單(*)
* 第一個
* 第二個
* 第三個

註: 輸出至 HTML 時才會有效果

![bg left:30% h:400](ruyut.png)

---

# 一起出現的清單(-)
- 第一個
- 第二個
- 第三個

![bg left:30% h:400](ruyut.png)

程式碼區塊

前後使用 ``` 包圍程式碼，```後面可以加上語言名稱，即可顯示程式碼區塊：

    

```java
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}
```

(程式碼是使用 highlight.js 著色)

參考資料：
Github - marp-team / marp-core
Marp 介紹
Marpit JavaScript 介紹

Ruyut 鹿遊

搜尋此網誌