Kalan's Blog

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

四零二曜日電子報上線啦!訂閱訂起來

本部落主要是關於前端、軟體開發以及我在日本的生活,也會寫一些對時事的觀察和雜感
本部落格支援 RSS feed(全文章內容),可點擊下方 RSS 連結或透過第三方服務設定。若技術文章裡有程式碼語法等特殊樣式,仍建議至原網站瀏覽以獲得最佳體驗。

目前主題 亮色

我會把一些不成文的筆記或是最近的生活雜感放在短筆記,如果有興趣的話可以來看看唷!

在 Typora 編輯器內自動上傳圖片

category: 雜談 tag: typora

Typora - 好用的 markdown 編輯器

Typora 是我非常愛用的 markdown 編輯器,用到現在覺得沒有任何比它更順手的編輯器。比較複雜的部落格文章我就會在 Typora 寫好後上傳,Typora 有非常豐富的功能,包含:

  • Table 的支援
  • 支援 LateX 語法,方便寫算式
  • 可以直接拖拉圖片產生對應 markdown 語法
  • 可支援多種 HTML 標籤,像是 iframe、video、ruby 等都可以
  • 可以自定義主題(用 CSS 撰寫)
  • 內建檔案、資料夾瀏覽與切換功能
  • 還有各種其他好用的功能

以上這些恰到好處的功能,讓我對 Typora 愛不釋手。 不過在用的時候有個煩惱,就是圖片的上傳。因為 Typora 只會將圖片的路徑放入 markdown 當中,像下面這種語法:

![image alt](/Users/Kalan/my/image/path.png)

如果照樣複製的話在網頁上呈現的話會直接破圖,因為使用者沒辦法存取你家電腦路徑,必須要將圖片上傳到雲端或是伺服器儲存空間才行。自己手動處理很麻煩,有時候圖片很大,就會想要先壓縮一下再上傳,一想到又要多一個操作就覺得很麻煩,寫文章的思緒就容易被打斷。

不禁心想有沒有不用跳脫編輯器也可以直接上傳圖片的方法。Typora 本身支援蠻強大的圖片拖拉行為,從網頁上複製貼上也完全行得通,本身就是一個很棒的 UI。

終於,我看到了這個:

Typora 上傳圖片

一看驚為天人啊!這個功能可以讓你在把圖片放到編輯器時要觸發的行為,像是統一移到某個資料夾、上傳圖片等等,更棒的是你可以自己定義 command 來上傳圖片!

Typora 圖片上傳客製化介面

在這個 upload 的指令當中,我把圖片做了壓縮,上傳到 S3、回傳圖片 URL,剩下的 UI、狀態互動都交給 Typora 處理,這樣一來就可以完全無痛上傳圖片!

完成後效果會像這樣:

實作

可以直接參考我在 Github上的程式( Node.js 撰寫),實作上還蠻簡單的,但因為只想趕快完成所以套件裝一裝就直接上了,喜歡從頭自己來的話也可以自己寫寫看。目前只支援 S3 上傳。

後記

從此我的人生開了一扇窗,再也不會因為懶得處理照片然後就懶得發文了。分享給熱愛用 markdown 產出內容的大家。

上一篇

eRemote 紅外線遙控器與 Google Home 實現智慧家庭

下一篇

在福岡遠端工作 4 個月的感想

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

Buy me a coffee