「Marp」用VSCode做簡報?!

閱讀時間約 3 分鐘

What is Marp?

Marp是利用Markdown語法編寫簡報的功能,可以簡單的作出俐落的簡報(但沒有什麼花俏的轉場,動畫之類的),不過可以僅用編輯器就生出來,同時可以使用Markdown語法給予簡報內容整齊又美觀的排版。
Mapr本身是一個開源專案,目前最方便的用法是安裝VSCode的擴充功能,便能以雙欄式操作即時呈現簡報結果。

起手式

要將Markdown的【.md】檔案變身成簡報,只要在文件前端插入Marp的屬性就可以了:
【marp: true】表示指定這個檔案是Marp簡報檔案
【theme: default】簡報主題預設有三種:default, gaia, uncover,可以另外以CSS自訂
【paginate: true】表示顯示簡報頁碼,如果第一頁(或任何一頁不要頁碼),可以在那一頁開頭插入<!-- _paginate: false-->就可以取消當頁面的頁碼顯示
【---】只要放3條dash line就是換下一頁了超簡單

常用指令

【####】放在文件開頭屬性的指令(整個簡報的通用設定)
【marp: true】 指定文件為Marp簡報
【theme: default】 選定佈景主題
【paginate: true】 開啟頁碼(預設右下角)
【backgroundcolor: white】 背景為白色(若要使用佈景主題的設定,此項可忽略)
【color: black】 文字為黑色(若要使用佈景主題的設定,此項可忽略)
【header: ___】 頁首(預設左上角,可放圖片)
【footer: ___】 頁尾(預設左下角,可放圖片)
【<!-- _paginate: false-->】 前綴【_】表示只作用在當頁面,取消頁碼
【<!-- _backgroundColor: aqua -->】 變更當頁面背景
【<!-- _color: white -->】 變更當頁面文字顏色
【<!--fit-->】 把這一串code放在標題的【#】和標題文字之間,標題就會自動被放大到填滿頁面
【####】 頁面中的指令(內容呈現)
【![](image.jpg)】 插入圖片(可調尺寸,濾鏡)
【![bg](image.jpg)】 變更當頁面背景(可調尺寸,濾鏡,圖片縮放方式,也可調整靠左/靠右)
還有其他較複雜/延伸的使用方式可參考官方連結
不過基本上與Markdown差不多啦!

自訂主題

基本環境設定
若要自訂簡報主題就需要一點CSS技巧,首先要生成一個CSS檔案(路徑與簡報檔案相同),接著在VSCode工作區的`Marp:Theme`設定中加入CSS檔案的檔名就完成了。
主題CSS檔案內容
【/* @theme theme-name */】 在Metadata中設定主題的名字
【section】 標籤後面是簡報全域設定
接著可以依照一般CSS操作分別對`h1~h6, ol, ul, ul, p`設定細節
設定完成後回到簡報修改主題名稱就能套用新主題了!更多設定一樣可參考官方連結


輸出簡報檔案

Marp擴充功能可以輸出多種檔案:
以上就是Marp簡報擴充套件的介紹,這篇文章變成Marp簡報就是這個樣子喔!
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
矢掛町位於岡山縣西南部,氣候溫暖​​,春天,您可以在小田川沿岸和嵐山欣賞櫻花和油菜花盛開的日本鄉村美景;夏日的夜晚,星田川沿岸、美山川沿岸的宇內螢火蟲公園裡,散發著微弱光芒的螢火蟲瘋狂地舞動;秋天,被譽為名勝的大通寺的池塘噴泉觀賞庭園,銀杏樹等紅葉點綴其間,景色十分美麗;冬天,從町內或附近的展望台可
Thumbnail
千萬不要覺得經濟獨立是一切解案,父母的無能正在藉由你的「懂事」來開脫。
Thumbnail
題目敘述 Triangle 題目會給我們一個三角形的二維陣列triangle ,每個元素分別代表每個格子的成本,請問我們從最頂端到底部的下墜路徑的最小成本總和是多少? 每次下墜到下一排的時候,可以有兩種選擇: 1.往左下方的格子點移動。 2.往右下方的格子點移動。 測試範例 Examp
Thumbnail
本來以為那樣的情緒會掃蕩一空 看了好笑的影片 特調幾杯會大醉的酒 跟最親近的人講電話 爆睡了好幾天 那樣子的情緒還是跟著我 委靡不振用在這裡最適切了 但我想去旅行 想要有個人抱著我 我知道我沒事 只是如果有就好了
Thumbnail
Face to Many 是一款強大的創意工具,它能將一張普通的臉部照片轉換為多種風格,像是將臉變成 3D、表情符號、像素、電子遊戲、黏土或玩具。只需要幾個步驟,就能輕鬆生成各種有趣的臉部圖像,需注意的是這款工具僅限於非商業用途使用。
Thumbnail
生命要向前看,卻要向後才能夠理解。 《袒露的心》這本書陪伴我上週的整個週末。很適合每個內在還沒完全長大、渴望被愛的大人(或其實還是小孩)的書。 七月底的某個午後,和平路老師約在一間啤酒餐廳見面。還記
Thumbnail
真正的台灣編輯實際上又都在忙些什麼呢?任職於台灣某出版社的編輯小姐Yuli,透過部落格的圖文漫畫修改匯集成冊的輕鬆閱讀圖文作品《編輯小姐Yuli的繪圖日誌》,敘述活生生和血淋淋的台灣編輯生態,好的壞的;代理國外強作大賣或是步步耕耘本土作家之間存在著什麼不同點?讓Yuli用她多年的編輯經驗來告訴你。
Thumbnail
<p>被復仇蒙蔽雙眼的真由、被貪婪反將一軍的百合、被色慾絆倒的正吾及諒一、被上個世代的恩怨犧牲的直巳,在《賢者之愛》中每個人都被慾望弄得遍體鱗傷。有人取得過暫時的勝利、有人一夜之間報復成功,但沒有人真正地感到片刻的幸福。</p>
Thumbnail
<p>在山田詠美筆下,女性從來就不是配角、更無法視為弱者。即便一開始屈居下風,也會透過漫長的等待,用最細膩的方法溫柔地復仇。</p>
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
矢掛町位於岡山縣西南部,氣候溫暖​​,春天,您可以在小田川沿岸和嵐山欣賞櫻花和油菜花盛開的日本鄉村美景;夏日的夜晚,星田川沿岸、美山川沿岸的宇內螢火蟲公園裡,散發著微弱光芒的螢火蟲瘋狂地舞動;秋天,被譽為名勝的大通寺的池塘噴泉觀賞庭園,銀杏樹等紅葉點綴其間,景色十分美麗;冬天,從町內或附近的展望台可
Thumbnail
千萬不要覺得經濟獨立是一切解案,父母的無能正在藉由你的「懂事」來開脫。
Thumbnail
題目敘述 Triangle 題目會給我們一個三角形的二維陣列triangle ,每個元素分別代表每個格子的成本,請問我們從最頂端到底部的下墜路徑的最小成本總和是多少? 每次下墜到下一排的時候,可以有兩種選擇: 1.往左下方的格子點移動。 2.往右下方的格子點移動。 測試範例 Examp
Thumbnail
本來以為那樣的情緒會掃蕩一空 看了好笑的影片 特調幾杯會大醉的酒 跟最親近的人講電話 爆睡了好幾天 那樣子的情緒還是跟著我 委靡不振用在這裡最適切了 但我想去旅行 想要有個人抱著我 我知道我沒事 只是如果有就好了
Thumbnail
Face to Many 是一款強大的創意工具,它能將一張普通的臉部照片轉換為多種風格,像是將臉變成 3D、表情符號、像素、電子遊戲、黏土或玩具。只需要幾個步驟,就能輕鬆生成各種有趣的臉部圖像,需注意的是這款工具僅限於非商業用途使用。
Thumbnail
生命要向前看,卻要向後才能夠理解。 《袒露的心》這本書陪伴我上週的整個週末。很適合每個內在還沒完全長大、渴望被愛的大人(或其實還是小孩)的書。 七月底的某個午後,和平路老師約在一間啤酒餐廳見面。還記
Thumbnail
真正的台灣編輯實際上又都在忙些什麼呢?任職於台灣某出版社的編輯小姐Yuli,透過部落格的圖文漫畫修改匯集成冊的輕鬆閱讀圖文作品《編輯小姐Yuli的繪圖日誌》,敘述活生生和血淋淋的台灣編輯生態,好的壞的;代理國外強作大賣或是步步耕耘本土作家之間存在著什麼不同點?讓Yuli用她多年的編輯經驗來告訴你。
Thumbnail
<p>被復仇蒙蔽雙眼的真由、被貪婪反將一軍的百合、被色慾絆倒的正吾及諒一、被上個世代的恩怨犧牲的直巳,在《賢者之愛》中每個人都被慾望弄得遍體鱗傷。有人取得過暫時的勝利、有人一夜之間報復成功,但沒有人真正地感到片刻的幸福。</p>
Thumbnail
<p>在山田詠美筆下,女性從來就不是配角、更無法視為弱者。即便一開始屈居下風,也會透過漫長的等待,用最細膩的方法溫柔地復仇。</p>