前言
本文源代碼位於：https://github.com/pzqu/tools
原創首發：https://coding3min.com/1134.html
今天看jeremyxu 的技術點滴，發現分享了一個 markdown 寫 PPT 的插件，驚爲天人，先來看看官方效果圖。
再看看 jeremyxu 寫的效果，我學完了都沒學會是怎麼寫的，直到看了他項目樣例我纔算是真的學會了。
參考marp 官方文檔可以很快學會用法，但是用的時候去翻比較麻煩，我提煉了常用的語法，最後做了一個 PPT 練手，纔算是學會了，現在分享出來以便以後翻閱。
marp 是個什麼？
日常工作生活中常常會用到 ppt, 但是 ppt 有時候做起來非常浪費時間，如果不用關心排版，可以專注內容自動排版豈不妙哉？
正好 markdown 就是解決排版的一種語言，有好心人自發開發了一個做 ppt 的利器，只用關注內容，簡單分隔一下，稍微改一下樣式就可以用了。
安裝和上手
下載個VSCode, 天然支持 markdown ，然後在左側的插件欄中搜索並安裝 Marp for VS Code 就可以開始了。爲了獲得更好的 Markdown 編輯體驗，大家不妨再安裝一個叫做 Markdown All in One 的插件。
使用 Markdown 輸出一份最簡單的幻燈片，只需要讓編輯器知道兩點即可：它是幻燈片（不是文檔）以及它該在哪裏分頁，通過如下代碼做到：
---
marp: true
---
幻燈片1
1. asdf
2. asdf
---
幻燈片2
* asdf
* asdf
效果如下
編輯完成後，通過編輯器右上角的 Marp 圖標按鈕就可以調出 Export slide deck... 命令並導出幻燈片了。 Marp 插件目前支持導出 HTML 和 PDF 格式，另外可以將首頁導出爲 PNG 或 JPEG 格式的圖片。
優化樣式
當然沒有漂亮是樣式是不行的，好在可以簡單設置呈現，爲此我專門做了一個 ppt
有三款主題可以選擇，可以參考themes，有的主題只能居中，我選了一個可居中也可居左的主題。
---
marp: true
theme: gaia
footer: '機智的小熊 2020-06-18'
paginate: true
style: |
section a {
font-size: 30px;
}
---
footer代表是頁尾，header代表頁首paginate是否在右下角標頁碼style自定義全局樣式，插件所有的樣式參考官網提供的樣式
首頁配置
在當前頁面頭部，用 html 中的註釋語法
<!--
_class: lead gaia
_paginate: false
-->
_class當前頁面設置lead gaia樣式（居中），如果前面不加下劃線會影響所有頁面_paginate屏蔽右下角頁碼- 其他更詳細語法參考官網手冊
首頁內容如下
# Marp for VS Code方法
## 一種用markdown寫ppt的vscode插件marp
這款ppt就是我用“寫”出來的，用來展示效果。
圖片設置
更改長寬
圖片濾鏡（Image Filter）
基於 CSS 的 filter 屬性，Marp 可以對圖片進行一些基於模糊、亮度、對比度等的操作，如：
參考更多 p 圖命令
背景圖片
針對幻燈片的背景圖片， Marp 提供了簡單的方式將某張圖片設爲背景，在方括號中寫入 bg 即可
同時通過在 bg 後追加圖片的格式屬性，如 [bg fit] ，可以具體設置背景圖片的縮放方式。其中 cover 表示充滿頁面， fit 表示拉伸以適應頁面， auto 爲不做縮放使用原圖片比例。
其他圖片詳細語法, 參考官網文檔調整大小、濾鏡，圖片作背景的佈局、尺寸、分割
更改佈局
背景圖片佈局
在其中一張圖片後加入屬性 vertical 將使圖片縱向組合。
更新圖片與文字位置
有時候想左文右圖，或者左圖右文的佈局，可以設置背景圖片的位置
假如你想加一張完整圖片做展示，而不是要上面的樣式，可以自行調整圖片大小實現
如果是上下排布的長圖就不需要加bg了，直接放上去就好了。
### prometheus
此處的圖片加陰影`drop-shadow`
常用語法彙總
color: red設置字體顏色paginate: true顯示頁碼,_paginate: false屏蔽當前頁面頁碼- 有三款主題可以選擇，可以參考themes
- 官網提供的樣式
- 官網提供的語法彙總
- 更多 p 圖命令
- 官網文檔調整大小、濾鏡，圖片作背景的佈局、尺寸、分割
- 更多背景圖片文字排版命令