用 Marp 製作幻燈片

Keynote Using Marp

因為不想捲入 Office 那一套工作流,我已經很久沒有仔細用 PowerPoint 了。PowerPoint 總是存在一些惱人的兼容問題與字體問題——實在無法期待別處的 PowerPoint 和你正在使用的版本相同(這會打消你學習新功能的念頭),同時我也對字庫的嵌入力不從心。Office 在各處生根的感覺讓我感到由衷的恐懼,似乎也沒有其他力量能夠斬斷它的脈搏。

我也不用 Keynote,它在被我第一批卸載的軟體之列。主要還是考慮兼容性的問題。而且「吃力不討好」的感覺實在勸退。縱然有漂亮的轉場和動畫,它的通用性依舊存疑。在演講的時候沒有人想要發生什麼意料之外的事情。而上述兩者卻是事故多發。

考慮到通用性,我從三年前開始採用 pdf 的格式。處處都能呈現,頁頁不會失真。對於 Windows 的話,如果隨身帶一個輕量的 Sumatra PDF,就不會擔心流暢度的問題。Adobe Acrobat 提供簡單過場動畫,似乎能夠作為補償。我持有這樣的想法。接下來我需要找到一個生成 pdf 的途徑。

首先是我平時常用的 Adobe InDesign(上面是事故現場)。我對這個排版軟體有一定的了解。InDesign 的母版和段落、字符樣式功能、方便易用的 OpenType 特性,以及匯出的選項設置,都讓我覺得順手。但用它來製作幻燈片好像是屬於托托的歪門邪道。並且感覺又太厚太重了。我還用過一段時間的 LaTeX Beamer,在文本編輯器下,可以做到 InDesign 做不到的繁簡轉換和數學公式支持,並且結構層次清晰、排版的效果也滿優秀。就是太嚴格太繁瑣太難寫了。似乎科學家們愛用它。

那麼,考慮到通用性和易用性的話,我今天開始用 Marp 了。

安裝

Marp(Markdown presentation writer)是用 Markdown 呈現幻燈片的開源專案生態。説它是生態,是因為它包含有主體、框架、Visual Studio 插件和終端機的幾個部分。在這裡我主要討論它的終端機版本 Marp CLI官方文檔)。

Marp CLI 透過 NPM 載入。首先要確保 NPM 的 Node.js 已經安裝(用 Chocolateyapt-getHomebrew 吧)。若要全局使用 marp 命令,鍵入安裝:

npm install -g @marp-team/marp-cli

語法

是 Markdown 的語法啦。不過增加有幾點需要注意。首先,頁面是通過 --- 進行分隔的。

1. 後設和樣式

文檔最始是後設數據和格式設置區,用兩個 --- 包裹起來,裡面是 YAML 命令。後設數據包括標題(title)、描述(description)、主站地址(url)和主站圖像(image)。裡面亦可以設置比例(size,參數可以為 4:34k,默認為 16:9)、主題(theme)、頁碼(paginate)什麼的,可以參考官方文檔。像:

---
title: 用 Marp 製作幻燈片
description: 寫描述檔好累 😞。
url: https://lateblooming.typlog.io
image: https://i.typlog.com/lateblooming/8432503164_376422.png
theme: gaia
size: 4k
---

亦可以通過 <!-- _backgroundColor: #E8D08F --> 指定當前頁面下的一些屬性。而去掉 _<!-- backgroundColor: #E8D08F --> 對接下來的所有頁面都有效。

2. 列表的顯示

對於有序列表,1. 是將條目全部顯示,而新增的 1) 可以一條一條地通過點擊顯示出來。對應的無須列表,-+ 是 全部顯示,* 是依次顯示。

3. 還有……

圖片的命令有點麻煩,在這裡就不嘮叨啦,具體可以參考這個。Emoji 用的是 Twitter 的版本。

命令行參數

1. 轉換器

marp 既可以被理解為一個轉換器,也可以理解為一個 local host。作為一個轉換器。用我們熟悉的 -o 參數指定輸出文件名。默認輸出為一個網頁的格式(html)。指定 --pdf--pptx 可以得到相應的格式。同時可以輸出為 PNG 和 JPEG。單圖層用 --image 多圖層用 --images,緊跟其後的是 pngjpeg

值得注意的是,在文檔中可以置入網路圖片。而置入本地圖片需要加上 --allow-local-files 的參數。(沒找到文件是不會有提示的哦!)

2. Local Host

有兩種模式,為即視模式(watch mode,--watch 簡寫為 -w),伺服器模式(server mode,--server 簡寫為 -s)。兩種模式都不會自動彈出頁面,前者需要手動打開,後者需要手動訪問 http://localhost:8080

即視模式會在每次源文件更新時編譯出新的輸出。在瀏覽器打開的話,會自動刷新網頁。而伺服器模式會在當前目錄下建立索引,可以訪問或轉換在期間的文件。marp 還有一個實驗性功能,參數是 --preview-p。在這上述兩個模式下加入後,或產生獨立的視窗。事實上會默認啟動 -w,因此以即視模式打開的話只用寫 -p 就好。

模板與主題(Templates and themes)

模板與主題是兩個概念。模板是產生 HTML 文檔時,嵌入的組件,像是翻頁按鈕什麼的。默認的叫做 bespoke,提供了導航、全屏、進度條(--bespoke.progress)等等。如果想要最小化模板,什麼也不需要的話,可以使用 --template bare

主題--theme)的話,除了預設之外,還有 griauncover。同時支援本機 CSS 樣式 --theme some.css

結語

最後還是不免覺得 Office 太壓迫神經。有人說 Microsoft Sway 或許有釋壓的作用,但是如果是基於雲的話,在網絡基礎設施「發展中」的地方又有太多因素需要考慮。

如果需要厲害的動畫和圖像的話,Marp 是力所不能及。而考慮到效率和通用性的話,也許屬於我製作幻燈片的選擇,最終最終會是 Marp 吧。