「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
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
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語法作為編輯文件的工具,可以輕易的編輯出美觀易讀的文件,適合用來傳播知識或是做為筆記平台。
Thumbnail
Marp是利用Markdown語法編寫簡報的功能,可以簡單的作出俐落的簡報(但沒有什麼花俏的轉場,動畫之類的),不過可以僅用編輯器就生出來,同時可以使用Markdown語法給予簡報內容整齊又美觀的排版。
Thumbnail
Marp是利用Markdown語法編寫簡報的功能,可以簡單的作出俐落的簡報(但沒有什麼花俏的轉場,動畫之類的),不過可以僅用編輯器就生出來,同時可以使用Markdown語法給予簡報內容整齊又美觀的排版。
Thumbnail
透過 Markdown 能夠撰寫易於閱讀、撰寫的純文字,並進一步透過像是 pandoc 這樣的轉換工具,選擇性地輸出多樣化的格式(如 HTML、Word 或者 PDF。)
Thumbnail
透過 Markdown 能夠撰寫易於閱讀、撰寫的純文字,並進一步透過像是 pandoc 這樣的轉換工具,選擇性地輸出多樣化的格式(如 HTML、Word 或者 PDF。)
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News