category: 雜談 tag: typora
Typora 是我非常愛用的 markdown 編輯器，用到現在覺得沒有任何比它更順手的編輯器。比較複雜的部落格文章我就會在 Typora 寫好後上傳，Typora 有非常豐富的功能，包含：
- Table 的支援
- 支援 LateX 語法，方便寫算式
- 可以直接拖拉圖片產生對應 markdown 語法
- 可支援多種 HTML 標籤，像是 iframe、video、ruby 等都可以
- 可以自定義主題（用 CSS 撰寫）
- 內建檔案、資料夾瀏覽與切換功能
- 還有各種其他好用的功能
以上這些恰到好處的功能，讓我對 Typora 愛不釋手。 不過在用的時候有個煩惱，就是圖片的上傳。因為 Typora 只會將圖片的路徑放入 markdown 當中，像下面這種語法：
如果照樣複製的話在網頁上呈現的話會直接破圖，因為使用者沒辦法存取你家電腦路徑，必須要將圖片上傳到雲端或是伺服器儲存空間才行。自己手動處理很麻煩，有時候圖片很大，就會想要先壓縮一下再上傳，一想到又要多一個操作就覺得很麻煩，寫文章的思緒就容易被打斷。
不禁心想有沒有不用跳脫編輯器也可以直接上傳圖片的方法。Typora 本身支援蠻強大的圖片拖拉行為，從網頁上複製貼上也完全行得通，本身就是一個很棒的 UI。
終於，我看到了這個：
一看驚為天人啊！這個功能可以讓你在把圖片放到編輯器時要觸發的行為，像是統一移到某個資料夾、上傳圖片等等，更棒的是你可以自己定義 command 來上傳圖片！
在這個 upload 的指令當中，我把圖片做了壓縮，上傳到 S3、回傳圖片 URL，剩下的 UI、狀態互動都交給 Typora 處理，這樣一來就可以完全無痛上傳圖片！
完成後效果會像這樣：
實作
可以直接參考我在 Github上的程式（ Node.js 撰寫），實作上還蠻簡單的，但因為只想趕快完成所以套件裝一裝就直接上了，喜歡從頭自己來的話也可以自己寫寫看。目前只支援 S3 上傳。
後記
從此我的人生開了一扇窗，再也不會因為懶得處理照片然後就懶得發文了。分享給熱愛用 markdown 產出內容的大家。
