「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
查看全部
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
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
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
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>