前言

這次鐵人賽經歷過兩次誤觸上一頁導致文章消失重打

以及昨天it邦幫忙網站卡頓擔心送出失敗要重打

於是開始找尋撰寫文章的替代方案

希望替代方案要符合幾點需求

1. 除了檔案上傳外，要可以離線編輯
2. 要有預覽功能
3. 要有語法檢查
4. 要能直接插入圖片或是gif
5. 尚未存檔就將編輯器關閉時，要將內容保留不能遺失

選手一: Dropbox Paper

• 優點
  • 支援 Markdown 語法
  • 支援插入圖片
  • 支援預覽
  • 會定時自動存檔
  • 支援拖拉移動圖片
• 缺點
  • 不支援離線編輯
  • Markdown 語法與 it邦幫忙有些差異
  • 複製貼到 it邦幫忙 會跑版要手動調整

選手二: Visual studio code + ShareX

Visual studio code

• 優點
  • 可離線編輯
  • 尚未存檔時關閉編輯器不會遺失內容
  • 支援預覽
  • Markdown 語法與 it邦幫忙 一致不會跑版
  • 有語法檢查的套件可以安裝
• 缺點
  • 無法直接上傳圖片
  • 圖片連結一定要 https 才能在預覽視窗看到

為了彌補無法直接上傳圖片的缺點，

我利用平常就在使用的截圖工具 ShareX 來輔助

ShareX 官網 Github

這次主要會用到 ShareX 的幾個功能

• 螢幕截圖 or 檔案上傳
• 上傳至圖片空間(imgur)
• 自動複製連結

主要使用方法有兩種

1. 螢幕截圖後，自動上傳 imgur 並將 url 複製到剪貼簿
2. 圖檔上傳後，自動將 url 複製到剪貼簿

在那之前必須先進行一些基本設定

設定 After capture tasks => Upload image to host

設定圖片上傳空間為 imgur

設定 imgur user (此步驟可略過，預設為匿名上傳)

設定 After upload tasks => Show "After upload windows" 或 Copy URL to clipboard

如果設定Show After upload windows，檔案上傳後會出現這個視窗

上述幾點設定完成後，

接下來使用 ShareX 進行截圖或圖檔上傳時就會自動將圖片上傳至 imgur

如果 After upload tasks 設定為 Copy URL to clipboard

那檔案上傳結束後，就可以直接在 VSCode 中 Ctrl + V 貼上

如果設定為 Show After upload windows

則可以點選視窗左下第二個 Copy link 後，即可在 VS Code Ctrl + v

現在來示範三種情境

1. 畫面截圖
2. 檔案上傳

畫面截圖

檔案上傳

原本想示範錄製 gif

但 ShareX 不能在錄製情況下再錄製

大致操作都跟畫面截圖一樣，等她錄製 stop 後就會進行存檔並上傳的任務

這樣算是解決 VS Code 中無法直接上傳圖片的缺點

這篇文章也是利用這個方式產生出來的!

至於 Imgur 圖片空間本身的機制也要注意

似乎是圖片在一定時間內沒有人瀏覽就會砍圖

如果擔心的話，可以選擇其他圖片空間如 Google Drive, Dropbox 等來存放圖片

結語

其實只要任何一款可離線操作的編輯器都能搭配 ShareX 做到一樣的效果

只是因為電腦剛好有安裝 VS Code，並且她支援 Markdown 及預覽所以就拿來用

ShareX 其實還有很多很強大的功能，例如

• 截圖時，可以標示文字、圖片、數字、馬賽克等多種選擇
• 截圖完成也能設定傳送到常用的圖片編輯器
• 圖片上傳空間支援很多間，Dropbox, Google Drive 當然也支援
• 文字檔案支援上傳到 gist
• 縮網址支援 goo.gl
• 可以自訂 workflow
• opensource 可以自己抓回來改
• 自訂熱鍵對應的 task

不過 ShareX 只能在 Windows 平台使用，OSX的使用者就無法使用到

今天的葉配ShareX番外篇就到這
(希望大家可以多多推廣 ShareX)