「Marp」用VSCode做簡報?!

更新於 發佈於 閱讀時間約 4 分鐘

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簡報就是這個樣子喔!




留言
avatar-img
留言分享你的想法!
avatar-img
Finrod Chen的沙龍
1會員
2內容數
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
使用 Notion 時,是不是常常在選 block 類別時花很多時間,搞的自己手忙腳亂呢? 如果是的話那我相信這篇文章能夠幫助到你!我整理了幾個我自己最常用的 markdown 語法分享給大家,不管是 windows 或是 mac 都適用喔!
Thumbnail
使用 Notion 時,是不是常常在選 block 類別時花很多時間,搞的自己手忙腳亂呢? 如果是的話那我相信這篇文章能夠幫助到你!我整理了幾個我自己最常用的 markdown 語法分享給大家,不管是 windows 或是 mac 都適用喔!
Thumbnail
這是教你插入野頁碼從簡報的第3頁開始為編碼第1頁, 我把第2頁設計成目錄頁我不想讓他有編碼,所以從第3頁開始,這樣有懂嗎?呵呵 首先到最上方的功能選項 [ 插入 ]然後 [ 頁首及頁尾 ] ☑勾選投影片編號 ☑標題投影片中不顯示 然後按全部套用 再來到功能選項的 [ 設計 ] 然後 [ 投影片大小
Thumbnail
這是教你插入野頁碼從簡報的第3頁開始為編碼第1頁, 我把第2頁設計成目錄頁我不想讓他有編碼,所以從第3頁開始,這樣有懂嗎?呵呵 首先到最上方的功能選項 [ 插入 ]然後 [ 頁首及頁尾 ] ☑勾選投影片編號 ☑標題投影片中不顯示 然後按全部套用 再來到功能選項的 [ 設計 ] 然後 [ 投影片大小
Thumbnail
如今,在编辑器领域,Markdown 大行其道。那么,如何使用 Markdown 语法呢?又如何选择合适的 Markdown 编辑器呢? Markdown 语法的历史与使用 Markdown 具有轻量化、易读易写易学等特性。你花费十几分钟就可以掌握大多数 Markdown 语法内容。 📷 📷
Thumbnail
如今,在编辑器领域,Markdown 大行其道。那么,如何使用 Markdown 语法呢?又如何选择合适的 Markdown 编辑器呢? Markdown 语法的历史与使用 Markdown 具有轻量化、易读易写易学等特性。你花费十几分钟就可以掌握大多数 Markdown 语法内容。 📷 📷
Thumbnail
Padlet
Thumbnail
Padlet
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
HackMD是由Markdown 台灣社團發起人吳承翰開發的線上多人協作共筆平台,使用Markdown語法作為編輯文件的工具,可以輕易的編輯出美觀易讀的文件,適合用來傳播知識或是做為筆記平台。
Thumbnail
HackMD是由Markdown 台灣社團發起人吳承翰開發的線上多人協作共筆平台,使用Markdown語法作為編輯文件的工具,可以輕易的編輯出美觀易讀的文件,適合用來傳播知識或是做為筆記平台。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News