之前寫 md 文件都是用的 Typora ,這款編輯器很簡潔方便, 但是在處理圖片的時候有點蛋疼,當然你可以用付費外掛自動上傳,但是秉著勤儉節約的特質,我就逛了逛了其他方案。然後發現其實用 vscode 寫 Markdown 也非常爽啊。
主題外掛
這一步其實很重要,畢竟寫文章,一方面是寫的好,另一方面是排版好看清楚,可以說 Github 主題的 md 渲染方式是個人最喜歡的了,簡潔清爽又不失專業。
Markdown Preview Github Styling

圖片自動工具
這是一款 vscode 外掛,支援快捷鍵將你的圖片上傳到遠端,預設用的是圖床 sm.ms(免費的)。 但是個人建議配置自己的七牛雲 儲存或者阿里雲等。畢竟自己的東西更加安全可靠一些。
支援截圖上傳,本地上傳等方式直接轉化成線上地址,無需手動在圖床上傳再來回貼上。

錄製 Gif 工具
強烈推薦 Gifox 。當然還有 Kap,這個生成的gif太大了。
這是一款高顏而且高質量的 Gif 生成工具, 一般生成的 gif 只有幾百 k。 我這篇文章基本上的 gif 圖只有 100k 左右。

目錄以及快捷鍵
支援以下功能 + 快捷鍵
按下 shift + command + p 可以檢視。

Key | Command |
---|---|
Ctrl + B | 切換粗體 |
Ctrl + I | 切換斜體 |
Alt + S | 切換下劃線 |
Ctrl + Shift + ] | 標題升級 |
Ctrl + Shift + [ | 標題降級 |
Ctrl + M | 切換數學環境 |
Alt + C | 選中/不選中任務 |
Ctrl + Shift + V | 切換預覽 |
Ctrl + K V | 將預覽切換到側邊 |
截圖工具
qq/微信自帶的快捷功能即可。
當然如果你想要這種高大上的截圖,帶陰影的。

這個其實是 Mac 自帶的功能。
Command + Shift + 3
這個組合鍵可以將當前螢幕的整個影象擷取下來,然後以「螢幕快照 + 日期」的編號形式命名,並自動以.PNG 格式儲存到桌面。
Command + Shift + 4
這個組合鍵可以擷取當前螢幕上任意一塊區域的影象,按完組合鍵即可鬆手,然後滑鼠自動變為一個標準器,當你移動游標(用滑鼠單擊拖動或是在觸控板上三指同時拖動)選擇擷取區域時,旁邊會出現一個即時變化的長寬畫素數值,確定後鬆開手勢(或滑鼠)即可完成截圖。同樣,這種操作以「螢幕快照 + 日期」的編號形式命名,並自動以.PNG 格式儲存到桌面。
Command + Shift + 4 + Spacebar
如果你想完整的擷取螢幕上某一個視窗的影象,可以先按完 Command + Shift + 4 的組合鍵,然後按下空格鍵(或者 Command + Shift + 4 + 空格鍵同時按下),游標會自動變成一個照相機圖示,此時所有區域處於蒙版狀態,將游標移動到目標視窗單擊即可完成截圖。
如果你不選擇任何視窗,只是把游標放在桌面上,單擊就會自動擷取整個背景桌布的影象,注意,是背景桌布。同樣,這種操作以「螢幕快照 + 日期」的編號形式命名,並自動以.PNG 格式儲存到桌面。
特效
程式碼的陰影: carbon.now.sh/ (裝 X 必備)

移動端套殼

Android、iOS、Window各種殼。
生成的圖片較大, 這張圖約為1.7M。所以需要後面的圖片壓縮。

圖片壓縮
Tinypng 可以看到效果巨明顯。

寫到最後
大家就可以開心地裝X了,有了這麼些強大的工具,嗯,真香。
推薦閱讀: pkg版本規範管理自動化最佳實踐
友情連結
參考
更多請關注
