Medium 本身不支援 code block 編輯,雖然不知道背後的原因為何(或許工程師並非主要客群),所以如果要高亮程式碼,一個作法是直接貼圖片,一個是貼在 gist 上後再 embed 到文章當中。例如:

console.log('abcdefg');

程式碼用圖片貼出雖然可以達到高亮效果,但對工程師來說是一件相當不友善的事,因為無法透過複製貼上的方式來實際測試你的程式碼,或者編輯文章時還要手動修圖,是一件很麻煩的事。

不過貼上 gist 也有幾個問題

https://gist.github.com/kjj6198/6a9fc8db16070a75290ed0faf5fc6ad3

  • 手機版無法觀看,會直接噴出連結給你而非嵌入的內容
  • 自己貼 code 到 gist 太麻煩。(不過搭配 vscode sublime 等套件上傳到 gist 也是個不錯的方式)

為了盡量在 Medium 看到高亮的 code block,最後決定使用 AWS Lambda 解決這件事。

AWS Lambda

對於 Lambda 還不了解的讀者,目前網路上已經有很多資源可以觀看,這邊不再贅述。Lambda 是讓 AWS 幫你執行想要的 function,而不用實際去建立一個 server(當然背後還是有 server 啦)。透過這種方式,我們不用寫個 function 就要部署到一台機器,甚至去維護它,我們只需要執行就好。

Github Issue

為了串接到 lambda 的 endpoint,決定透過 github webhook 觸發。因為在 github 可以使用 issue 寫 markdown,還可以上傳圖片(github 幫你 host)、預覽、code block 等,其實相當方便。想要發布文章時,再透過 close issue 觸發 webhook,再透過 lambda 將 code block 上傳至 gist,最後呼叫 Medium API 建立文章。

Medium API

Medium 的 API 短小輕薄,不過方便好用。首先先到個人頁面的 setting > Integration tokens 生成 token,再透過 token 呼叫建立文章的 API 即可。

Gist API

gist API 也是一樣,為了不讓自己的 gist 一片混亂,建議可以另外再開一個帳號專門存放文章使用的 code。到 settings > developer settings > personal access token > generate token 建立 token,記得勾選 gist 權限。

串接 Lambda

前置工作做好後就可以開始串接 lambda 了。

首先把建立好的 lambda endpoint 放到 github webhook 中,然後隨便找一個可以編譯 markdown 為 HTML 的 package(我是用 marked),結合起來就可以囉!

一個簡單的實作在這裡。雖然稍嫌麻煩,不過其實還挺方便的。不知道 Medium 何時才要支援 code block QQ。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s