在VS code裡使用Marp快速製作需要有數學公式和程式碼的美美簡報投影片
最近正在準備開學第一、二週的簡報內容，如果簡報內需要用到數學公式也需要用到程式碼的話，使用powerpoint實在是有點麻煩，於是我決定使用Marp來讓我可以快速的製作簡報，使用VS code的extension的話，也很方便管理程式碼和簡報，這篇文章分享用Marp for VS Code來製作簡報。
什麼是Marp
來源：Marp的官方網站
Marp是Markdown Presentation Ecosystem的簡稱，它可以幫助我們簡單使用基於markdown的語法來進行簡報的編輯。
對我來講，有幾個很不錯的優點：
- 節省時間，不論是打字的時間還是美化的時間都是
- 不用排版，它會自動幫忙排
- 可以熟悉Markdown語法
- 可以快速輸入程式碼或是數學公式
- 基於html/css/javascript的前端架構，所以想要做個人化調整可以用html語法調整。
雖然我的主業並不是做前端，但是因為自己也需要寫個人網頁等等介面，所以雖然我的html寫得不怎麼漂亮，但是基本的一些html/css還是沒問題，這也讓我可以很方便的客製自己想調整的簡報Layout或美編。
前置作業
- 電腦已經有用Visual Studio Code (VS code)
- 知道怎麼建一個
OOOO.md的markdown檔案 - 會一點基礎的html更好
- 會寫mathjax或katex語法很方便
在VS code使用Marp
在自己的VS code裡面去extension market輸入Marp，應該不難找到這個擴充應用。
基本操作
安裝好之後，在自己的folder裡面建立一個檔案，例如 my_presentation.md
輸入一些基本的設定如下：
<my_presentation.md>
---
marp: true
theme: default
title: my presentation
author: Guan-Yun Wang
---
以上寫的是一些基本的設定，如果還需要其他的設定，可以再加入：
---
marp: true
theme: default
title: my presentation
author: Guan-Yun Wang
footer: "G.W."
class:
- lead
- invert
paginate: True
---
其中，theme 指的是主題，除了default可以使用之外，還有 gaia和 uncover可以選。而 footer是在投影片左下角的呈現的文字，paginate是頁碼，呈現在右下角，class則是指的是排版等美化，其實以html來說，相當於 <div class="">裡面要填入的內容，如果填了lead指的是文字置中(但default主題不支援)，如果是invert指的是明亮色調互換。
首頁不同
如果只是想要首頁不同，可以在前面加入_，就可以只做首頁設定。例如
---
marp: true
theme: default
title: my presentation
author: Guan-Yun Wang
footer: "G.W."
_footer: ""
_class:
- lead
- invert
paginate: True
_paginate: False
---
可以注意到第7行，我加入了_footer: ""，這樣一來，首頁的頁尾就會變成空白，而且因為第12行 _paginate: False的關係，也不會有頁碼。
來寫第一頁簡報吧
上面的設定是我蠻喜歡的設定，那麼就來寫第一張簡報吧。
接著再繼續寫：
---
# Week 1
## Course Orientation
Guan-Yun Wang
2025.02.17
---
就會呈現如下圖的效果：
那因為這是default的theme所以不會有置中效果，但如果換成gaia，如下：
一鍵完成主題的轉換。
其他示範
可以寫程式碼、寫數學式子，例如以下範例
---
# Test
<!-- display local image -->
<!-- display python code -->
如果要寫程式碼，例如Python
```python
1 print("Hello World")
2 #也可以不要加數字就沒有行數
```
數學式子示範(多行置中)
$$
\begin{align}
f(x) &= x^2+2x+1 \\
&=(x+1)(x+1)\\
&=(x+1)^2\\
\end{align}
$$
也可以把數學式子 $(x+1)$ 放在句子裡面。預設是Mathjax的語法。
---
呈現出來的效果如下：
靈活運用 html
如果要修改排版的話，可以直接把html加入到裡面，但是在使用html語法之前，先確認一下extension setting有沒有把html打開。如果不能正常顯示html語法，可能就是這個沒有打開。
如果裝好這個擴充的話，應該可以在右上角找到它的圖示，那麼就可以很簡單的找到設定的地方。
確認HTML有可以運作，那麼就可以使用html做更多更進一步的操作。
我最常用是修改文字大小或者是想要設計一點顏色，那麼我就會直接在我想要改的那個段落的前後加入一些Html tag
---
# Color and Day
<div style = "font-size:22px;">
|Date|Color|
|---|---|
|1/1| Red|
|1/2| Blue|
|1/3| Orange|
<div>
<div style ="background:rgb(230,245,245)">
這是一個測試背景顏色的區塊
這是一個測試背景顏色的區塊
這是一個測試背景顏色的區塊
</div>
---
效果如下：
這裡也同時呈現了用markdown來畫表格的方法，此外，由於這是基於網頁前端的架構，所以其實表格是可以超過簡報的大小的，它會自動變成一個拉霸。另外，也可以透過background來設定背景顏色。
那其他如果很熟悉css語法的話，其實可以直接使用 <style>...</style>在裡面寫好自己喜歡的css，也可以直接自己call來使用，就可以快速的客製化自己想要的樣子。\
而我自己在做簡報的時候，通常都是一邊開著預覽來寫，大概是這樣：
這樣就可以一邊寫簡報，一邊即時的看排版出來的樣子是不是自己喜歡的感覺。而因為這樣能專注在文字的輸入上，我個人蠻喜歡這樣製作簡報的方式，比較直接，就像是認真的在寫自己的技術筆記一樣，寫著寫著簡報就做完了。
輸出成簡報
做完簡報之後，就可以來輸出囉。
可以點選右上角圖示，選擇Export Slide Deck。
大致上有這幾種檔案類型可以選擇。
另外，由於他是基於網頁前端的一個架構，所以如果變成pptx的話，它只會是一張張的圖片，雖然可以另外開功能讓它變成可供編輯的pptx，可是這個功能目前還在測試當中，可能會有Layout崩壞的風險。
但是，正是因為它基於網頁前端技術，所以如果輸出成html，我覺得是最漂亮好用的。
它會呈現一個簡報模式，如果開啟投影模式(最右邊的圖示)，甚至還會出現演講者備忘稿。如果使用bullet來列點，甚至也會有基本的文字轉場動作。
而演講者備忘稿，就是我們在原本的.md檔裡面所寫的<!-- -->的註解。另外會顯示當下的時間以及所經過的時間。
另外，如果要當成講義方便發給其他人，輸出成pdf比較容易發放，pdf格式的話，也仍然會維持著一頁一頁的版面配置，而且也可以複製文字，若有超連結也都可以點選等等。所以也是一個很方便的選擇。
最後補充，使用jupyter notebook也可以快速的轉成簡報，不過因為我還是蠻喜歡這個簡報風格，所以目前我使用了Marp做了前一兩週份量的簡報。而Marp生態系似乎也還有其他可供串接的，不過目前為止我還算夠用，有發現到進階好用的工具再分享囉。
參考網站&資源
Marp.app: https://marp.app/
Marp for VS Code：https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode
Marp for VS code github readme: https://github.com/marp-team/marp-vscode/blob/main/README.md
https://github.com/marp-team/marp-core#features
分欄技巧補充：Marp 教程：实现分栏和其他高级排版技巧
HTML tag無法作動時：https://github.com/marp-team/marp-vscode/issues/140
國外blogger的介紹：https://dev.to/rprabhu/marp-a-markdown-presentation-app-that-simplifies-your-tech-talks-37m4
Marp Guide Github: https://github.com/marp-team/marp/tree/main/website/docs/guide
其他技巧補充：https://www.hashbangcode.com/article/seven-tips-getting-most-out-marp
