「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
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
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。)
Thumbnail
安裝軟體:ATOM-https://atom.io/ 基本上安裝畫面上的download會顯示您目前所用的工具所需的軟體 這邊顯示是Windows的64-bit就是我所用的~Mac會顯示Mac用的 2.每個軟體學習一開始都是要從HELLO WORLD開始,是因為要確認”環境”是否安裝”完成
Thumbnail
安裝軟體:ATOM-https://atom.io/ 基本上安裝畫面上的download會顯示您目前所用的工具所需的軟體 這邊顯示是Windows的64-bit就是我所用的~Mac會顯示Mac用的 2.每個軟體學習一開始都是要從HELLO WORLD開始,是因為要確認”環境”是否安裝”完成
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News