Kalan's Blog

本部落主要是關於前端、軟體開發以及我在日本的生活,也會寫一些對時事的觀察和雜感

目前主題 亮色

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

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

不過貼上 gist 也有幾個問題

  • 手機版無法觀看,會直接噴出連結給你而非嵌入的內容
  • 自己貼 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。

上一篇

React16 重點整理

下一篇

狂歡雙 11 — 祝我生日快樂

如果覺得這篇文章對你有幫助的話,可以考慮到下面的連結請我喝一杯 ☕️ 可以讓我平凡的一天變得閃閃發光 ✨

Buy me a coffee

作者

Kalan 頭像照片,在淡水拍攝,淺藍背景

愷開 | Kalan

愷開。台灣人,在 2019 年到日本工作,目前定居在福岡。除了熟悉前端之外對 IoT、App 開發、後端、電子電路領域都有涉略。最近開始玩電吉他。 歡迎 Email 諮詢或合作,聊聊音樂也可以,希望能透過這個部落格和更多的人交流。