本文原始碼位於:https://github.com/pzqu/tools
今天看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 代表頁首style 自定義全局樣式,插件所有的樣式參考官網提供的樣式首頁配置在當前頁面頭部,用 html 中的注釋語法
<!--
_class: lead gaia
_paginate: false
-->
_class 當前頁面設置 lead gaia 樣式(居中),如果前面不加下劃線會影響所有頁面首頁內容如下

# 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`

微信不允許添加非公眾號超連結,點擊閱讀原文,在電腦上閱讀體驗更佳
python爬蟲人工智慧大數據公眾號