在 vscode 中寫 Markdown 如何裝X

藍色的秋風發表於2019-01-21

之前寫 md 文件都是用的 Typora ,這款編輯器很簡潔方便, 但是在處理圖片的時候有點蛋疼,當然你可以用付費外掛自動上傳,但是秉著勤儉節約的特質,我就逛了逛了其他方案。然後發現其實用 vscode 寫 Markdown 也非常爽啊。

主題外掛

這一步其實很重要,畢竟寫文章,一方面是寫的好,另一方面是排版好看清楚,可以說 Github 主題的 md 渲染方式是個人最喜歡的了,簡潔清爽又不失專業。

Markdown Preview Github Styling

在 vscode 中寫 Markdown 如何裝X

圖片自動工具

PicGo

這是一款 vscode 外掛,支援快捷鍵將你的圖片上傳到遠端,預設用的是圖床 sm.ms(免費的)。 但是個人建議配置自己的七牛雲 儲存或者阿里雲等。畢竟自己的東西更加安全可靠一些。

支援截圖上傳,本地上傳等方式直接轉化成線上地址,無需手動在圖床上傳再來回貼上。

在 vscode 中寫 Markdown 如何裝X

錄製 Gif 工具

強烈推薦 Gifox 。當然還有 Kap,這個生成的gif太大了。

這是一款高顏而且高質量的 Gif 生成工具, 一般生成的 gif 只有幾百 k。 我這篇文章基本上的 gif 圖只有 100k 左右。

在 vscode 中寫 Markdown 如何裝X

目錄以及快捷鍵

Markdown All in One

支援以下功能 + 快捷鍵

按下 shift + command + p 可以檢視。

1548070992634.jpg

Key Command
Ctrl + B 切換粗體
Ctrl + I 切換斜體
Alt + S 切換下劃線
Ctrl + Shift + ] 標題升級
Ctrl + Shift + [ 標題降級
Ctrl + M 切換數學環境
Alt + C 選中/不選中任務
Ctrl + Shift + V 切換預覽
Ctrl + K V 將預覽切換到側邊

截圖工具

qq/微信自帶的快捷功能即可。

當然如果你想要這種高大上的截圖,帶陰影的。

linec1

這個其實是 Mac 自帶的功能。

Command + Shift + 3

這個組合鍵可以將當前螢幕的整個影象擷取下來,然後以「螢幕快照 + 日期」的編號形式命名,並自動以.PNG 格式儲存到桌面。

Command + Shift + 4

這個組合鍵可以擷取當前螢幕上任意一塊區域的影象,按完組合鍵即可鬆手,然後滑鼠自動變為一個標準器,當你移動游標(用滑鼠單擊拖動或是在觸控板上三指同時拖動)選擇擷取區域時,旁邊會出現一個即時變化的長寬畫素數值,確定後鬆開手勢(或滑鼠)即可完成截圖。同樣,這種操作以「螢幕快照 + 日期」的編號形式命名,並自動以.PNG 格式儲存到桌面。

Command + Shift + 4 + Spacebar

如果你想完整的擷取螢幕上某一個視窗的影象,可以先按完 Command + Shift + 4 的組合鍵,然後按下空格鍵(或者 Command + Shift + 4 + 空格鍵同時按下),游標會自動變成一個照相機圖示,此時所有區域處於蒙版狀態,將游標移動到目標視窗單擊即可完成截圖。

如果你不選擇任何視窗,只是把游標放在桌面上,單擊就會自動擷取整個背景桌布的影象,注意,是背景桌布。同樣,這種操作以「螢幕快照 + 日期」的編號形式命名,並自動以.PNG 格式儲存到桌面。

特效

程式碼的陰影: carbon.now.sh/ (裝 X 必備)

code-github.png

移動端套殼

1548073669419.jpg

Android、iOS、Window各種殼。

mockuphone.com/

生成的圖片較大, 這張圖約為1.7M。所以需要後面的圖片壓縮。

iphonex_landscape.png

圖片壓縮

Tinypng 可以看到效果巨明顯。

1548073057845.jpg

寫到最後

大家就可以開心地裝X了,有了這麼些強大的工具,嗯,真香。

推薦閱讀: pkg版本規範管理自動化最佳實踐

友情連結

藍色的秋風 無影er

參考

www.ifanr.com/app/546621

更多請關注

在 vscode 中寫 Markdown 如何裝X

相關文章