revealjs

我遇到的狀況

因為工作環境特性的關係，常常會在公司的各個地方移動。雖然公司有配一台筆電給我，但因為一些因素，我還是傾向移動到公司特定地點後就用該位置的電腦繼續工作。所以想要記錄一下自己使用的工具組合，避免不久後金魚腦的自己又忘記了。

投影片本體的製作，我用的是 reveal-md 這套工具來撰寫，因為這工具符合我的幾個基本需求：

1. 語法好寫可版控
2. 可上色程式碼片段
3. 支援 Mermaid 畫圖

我有寫了一篇教學丟在 Github 上，有興趣的可以參考：使用 reveal-md 撰寫投影片。

不過寫投影片常常會需要截圖，或是放一些圖案進去。截圖或是在圖上畫些標記箭頭等需求，Flameshot 這套開源軟體已經完美的解決了我的需求。但接下來的圖片處理，就會令人覺得煩躁，因為你得：

1. 把圖檔搬移到特定的位置
2. 撰寫 markdown 語法把圖檔插入

相信我，如果你有大量插入圖檔的需求，這真的很煩人。研究了一下之後，發現以下的配置可以很漂亮的解決這問題。

VSCode

我使用的編輯器是 VSCode。各家編輯器都有愛好者，但 VSCode 拿來寫 markdown 真的方便。除了語法上色，它還提供了即時預覽的功能，等於是你一邊寫一邊看結果，效率會非常的高。當然，還要搭配以下幾個擴充套件和特性，就可以讓撰寫 markdown 的流程一氣呵成：

Markdown Copy Files 功能

這功能是 2023 年 5 月開始支援的，好像沒有正式的名稱。顧名思義，它可以讓你把剪貼簿裡的圖檔直接存到指定的位置並產生 markdown 語法。圖檔名稱會自動序號遞增，所以不用擔心檔案被意外蓋掉的問題。更棒的是如果是搭配下面的 Remote – SSH 擴充套件使用，居然可以自動存到遠端機器上！非常方便好用。

我習慣把圖片都存在 markdown 檔案位置的 images 目錄下，所以我會針對此需求設定：到 Settings -> Workspace -> Extensions -> Markdown 後，拉到最下面，按下 Add Item 按鈕，將 Item 設為 **
，Value 設為 images/ 。

Remote – SSH 擴充套件

因為常常需要移動至不同的電腦工作，所以投影片我習慣都放在遠端機器上，這樣切換不同電腦也沒關係，只要使用 VSCode 連到同一台機器上，就可以繼續投影片的後續製作。這個 Remote – SSH 整合度真的出乎我的意料，除了上面說的複製截圖搭配這個擴充套件可以把圖檔存到遠端機器上之外，居然連 port forward 都有做，所以使用 reveal-md 啟用內建的投影片預覽功能也沒有問題，方便度真的非常高，推薦。

GitHub Markdown Preview 擴充套件

讓內建的 markdown 預覽效果和 Github 上的預覽一致。除此之外其實還多了一些功能，像是支援 task lists 語法，方便你的 markdown 檔案在編輯時與丟到 Github 上不會相差太多。

Markdown All in One 擴充套件

提供一些增強功能，可以看官方網站的說明。

Mermaid Markdown Syntax Highlighting 擴充套件

讓你在寫 Mermiad 語法的時候，支援語法上色。

大概是這樣，把上面的環境搭起來後，拿來寫支援 Markdown 語法的 Revealjs 投影片就很順手了，推薦可以試試看。