用 Markdown 撰寫 Slide - 使用 Marp 套件
鴿了一整個 2020，2021 應該開始繼續寫 Blog 和技術文章了。這篇文章將介紹如何在 VSCode 中使用 Marp 與 Markdown 來建立投影片。
在建立投影片時，可能大部分人都是使用微軟的 PowerPoint，iWork 的 Keynote 或是 Google Slide 等專有軟體。 這些專有軟體都提供了強大編輯與特效動畫等功能，能讓簡報產生許多優美的效果。 但這些軟體對於像個人這樣的開發與研究者來說有著以下缺點
- 可攜性差，格式不相通且使用時需要專有軟體才能打開編輯。
- 程式碼區塊表示與 Highlight 效果。
- 不易編輯 Latex 數學表示式。
過去在撰寫文件時個人也常使用 Microsoft Officer 系列軟體或是 Google Docs，但現在主要已經使用 Markdown 來建立工作記錄與撰寫 Slide(投影片)。 除了能便於搭配 Git 來進行文件版控外，還能透過其他第三方支援軟體轉換成其他格式檔案，如可透過 Hugo 將 Markdown 檔案轉換為靜態網頁後放上 GitHub 空間進行託管等，可說是非常便利的搭配。
而在建立 Slide 方面，之前常見的配合軟體是 Pandoc 與 Latex，可以將 Markdown 轉換為 PDF 格式或是 HTML 格式的 Slide。而本篇將介紹如何在 Visual Studio Code 上使用 Marp - Markdown Presentation Ecosystem 的 Plugin 軟體如何建立 Slide 的功能。
在 Visual Studio Code 安裝 Plugin
在 VS Code 使用 Marp 非常簡單，只要在 VS Code 中安裝 Marp for VS Code 的 Plugin 即可。
安裝後即可在右上角使用 preview Markdown 功能來預覽 Slide 的顯示結果。
預覽畫面
使用 Markdown 建立 Marp Slide
宣告為 Marpit Markdown 文件
在 Markdown 文件最上面(Front-matter)加入 marp: true 來宣告使用 Marp 來建立 slide
---
marp: true
---
之後就可使用 Markdown 語法撰寫 Slide 內容，如 List, Hyperlink 等都能用 Slide 來顯示。
分頁
可使用 --- 標記來分隔不同頁面的 Slide
# Page 1
Hello World!
---
# Page 2
magic word
Directives
Marp 中可使用被稱為 Directives 的標示來標注 Slide 頁面屬性。Directives 主要分為兩類，Global Directives 與 Local Directives
Global Directives
影響全部 Slide 內容的設定，放置在文件最上方 Front-matter 處，如設定 theme，css style，headingDivider(根據 header 設定分頁，如設為 2 就會在大於等於第二層標示 (##) 處自動分頁)等設定。
---
marp: true
theme: theme-name
style: |
section {
background-color: #eee;
}
headingDivider: 2
---
Local Directives
影響 slide 每個頁面的屬性，可以放在 Front-matter 影響全部 slide，或是用 HTML comment 來影響個別(或以下)分頁
<!-- backgroundColor: aqua -->
# Page 1
Aqua Background
---
# Page 2
Same color
上面的方式會將所以之後的 slide 背景都設為 aqua 色，若要只改變單一 Slide 可將屬性名稱 prefix 加上 _ 即可
<!-- _backgroundColor: aqua -->
# Page 1
Aqua Background
---
# Page 2
Original color
此外可以將 Local Directives 設定放在 Front-matter 來影響全部 slide，如
---
paginate: true
---
加入後會將之後所有的頁面加入頁碼。如果要參考更多的 Directives 設定資訊，可參考官方網站的說明內容
Image Syntax
Marp 提供了許多能簡單對圖片進行特效與縮放等處理的功能，可將設定放在 caption 處進行設定。
- Resizing image (調整圖片大小)
 <!-- 設定圖片寬度為 200px -->
 <!-- 設定圖片高度為 300px -->
 <!-- 同時設定兩者屬性 -->
 <!-- 設定圖片大小為 32x32 px -->
 <!-- 設定圖片大小為 32x32 px -->
- Image filter (圖片特效處理)
對圖片進行亮度，模糊，灰階，對比等進行調整。
 <!-- 圖片模糊化 -->
 <!-- 圖片模糊化，參數為 10px(越大越模糊) -->
 <!-- 圖片灰階化 -->
 <!-- 多重特效設定 -->
- Slide Background
設定影像為背景圖片並調整圖片屬性
 <!-- 設定 bg.jpg 為背景圖片-->
 <!-- 設定 bg.jgp 的圖片大小調整為背景框架大小 -->
- Multiple backgrounds
除了單一圖片，也能在背景設定多重圖，如果要將圖片水平展示，則可使用以下排列方式
排列結果為
水平顯示方式為
- Slide Background
讓圖片充滿左(右)兩側畫面
 <!-- 充滿左側畫面 -->
 <!-- 充滿左側 33% 畫面 -->
 <!-- 充滿右側畫面 -->
更多 Image Syntax 的使用方式可參考說明文件。
Latex Expression (數學表示式)
Marp 支援使用 Latex 語法來撰寫數學式，只要使用 $...$ 或 $$...$$ 包含著 Latex 數學式即可透過 Katex 或 MathJax 套件來顯示數學式。現在我們在 Markdown 中輸入一下 Latex 表示式
$$
\sum_{n=0}^{\infty}=\frac{f^{(n)}(a)}{n!}(x-a)^n
$$
則顯示結果為
匯出 Slide (Export)
若要將 Marp markdown 轉換成 PDF Slide，只要在 VS Code 的 Command Palette 中執行
> Marp: Export Slide Deck
即可選擇要匯出的檔名，格式與位置。
