HOME/Articles/

Marp - 用 markdown 做簡報的輕量解決方案

Article Outline

Marp: Markdown Presentation Ecosystem 在各種大大小小的簡報已經兩年了,每次報完總是有人會問我是用什麼軟體做簡報。想說寫一篇簡單的從入門到放棄文。

Marp 是什麼?

簡單來說,marp 是 markdown presentation,這個軟體的精神就是用 markdown 的語法來做簡報。他背後的原理是,是用 node.js 把 markdown 變成 html 的網頁。

什麼樣的人適合用 marp?

了解基本 markdown 語法的人。像是知道怎麼加入圖片、不同層級標題的人。另外 markdown 做簡報也有他的限制,就是不能任意指定元素的位置。例如想要在某個地方放一個方框,要實現這個功能就很困難。

marp 怎麼裝?

最簡單的方法是用 Obsidian 的 samuele-cozzi/obsidian-marp-slides 外掛、或 Marp for VS Code - Visual Studio Marketplace 的外掛,體驗最流暢。在設定裡面,還可以設定 css 樣式

CSS 樣式?

根據前面的提到的原理,我們可以指定各個層級的標題要長怎樣,h1, h2, h3, p, a, strong,都可以用 css 語法來指定。因此如果想要自訂樣式的話,需要會 css 語法。個人是跟 chatGTP 下 prompt: 請幫我寫一段 css 語法,設定 h1 用某字體、大小、padding

還有更多奇技淫巧嗎?

進階的玩法,用 Obsidian 或 VSCode 的外掛是無法實現的。要使使用 Marp-cli,在 command line interface。目標是讓不同的 markdown 的語法通以變出不同的花樣,要實現這個,就需要用 javascript 導入不同的 package,關鍵字是 markdown-it,它有不同的套件,例如表格、目錄、引言。例如我可以用 markdown-it-mark 把 "==重點==" 這樣的語法 變成 html 中的 <mark>重點 </mark> 再用 css 來指定 mark 要長什麼樣子。也以可用 kroki.io 的外掛來支援 mermaid、graphviz 來畫流程圖。

所以用 marp 到底有什麼好處?

進入語言模型的時代,在請 GPT 幫我們重點整理成條列式、整理成表格之後,就可以直接貼來用。另外,因為都是純文字,所以一個簡報檔都可以很小,搭配 imgur 的外掛,自動把貼上的圖片上傳,可以讓整份簡報就只是一個純文字的 markdown 檔。另外,如果是用 Marp-cli,將簡報輸出成 html,用 browser 來播放時,就可以支援各種瀏覽器外掛,像是為 doi 顯示 impact factor 之類的。

什麼情況不建議用 marp?

複雜的動畫、很多圖片的標示(step123)不適合。markdown 本質上不適合做這些複雜的內容。但換個思路,個人在做簡報時,就會問問自己:這頁簡報有需要弄得那麼複雜嗎?有需要在一張簡報裡塞那麼多東西嗎?拆成多頁,一頁一個標題、一個圖片,會不會讓觀眾更好理解?

TL;DR

Marp 適合只想弄個簡單排版的人、或本身用 markdown 在做筆記,想要把筆記變成簡報。入門簡單但想進階要有寫網頁的基本的 html css javascrpt 知識。願大家看完這篇後會覺得:人生苦短、繼續用 google slide 就好了🫠