使用markdown粘貼截圖時,操作步驟比較多:
1)截取圖片;
2)將圖片存在特定位置;
3)記住圖片路徑,在markdown文件中編寫代碼;
4)預覽效果;
而word之類的文檔編輯器,只需要截圖后,執行粘貼操作即可,特別方便。
希望在編寫markdown時也支持這個操作,查閱資料后發現,可以借助VS Code的Paste Image插件實現:
截圖后,執行 Ctrl + Alt + V 操作,即可完成圖片存盤、生成markdown嵌入圖片的代碼、效果預覽三個步驟。
這里記錄下,以便后續查閱。
一、vscode安裝及配置
vscode官方網址:https://code.visualstudio.com/
支持主流的操作系統:
點擊下載即可獲取,如果下載過慢,也可從百度網盤獲取,路徑如下:
https://pan.baidu.com/s/1joCkmtTbUpSKDK4QLZRS0A
文件列表如下:
關注微信公眾號(聊聊博文,文末可掃碼)后回復 2022041701 獲取提取碼。
安裝markdown擴展
可以使用Markdown All in One,當然也可以選擇其它插件,看個人喜好了。
markdown語法及示例
1、標題
使用 # 字符來標注標題,一級標題一個 # 字符,二級標題兩個 # 字符,以此類推。
示例如下:
2、段落
創建段落,需要使用空格或空白行將文本進行分割。
示例如下:
3、列表
3.1 有序列表
創建有序列表,需要在每個列表項前添加數字,並緊跟一個英文句號,列表數字需要從1開始。
3.2 無序列表
創建無序列表,需要在列表項前面添加如下英文字符(三選一):
+
-
*
可單獨使用,也可混合使用,示例如下:
4、粗體及斜體
加粗文本,可以使用兩個星號()或下划線(_)包括,斜體字,可以使用一個星號()或下划線(_)包括。
示例如下:
5、代碼及代碼塊
代碼塊可以使用反引號(`)進行包裹,單行代碼用一個反引號,多行代碼用三個反引號。
示例如下:
6、分隔線
分隔線,可以使用三個或多個星號(***)、破折號(---)或下划線(___)來實現:
1)需要在單獨一行上使用;
2)不能包含其它內容;
示例如下:
7、鏈接
格式:
[鏈接文字描述](鏈接地址 “鏈接說明”)
或
<鏈接地址>
或html語法
<a href=“超鏈接地址” title=“超鏈接title”>超鏈接顯示名</a>
示例如下:
8、圖片
markdown語法如下:

對應的html代碼:
<img src="圖片鏈接" alt="圖片描述" title="圖片title">
帶鏈接的圖片語法:
[](圖片鏈接)
示例如下:
9、其它
9.1 轉義字符
如果需要使用markdown語法里面的字符,可在字符前添加反斜杠(\)字符。
可做轉義的字符如下:
字符 | 名稱 |
\ | 反斜杠 |
` | 反引號 |
* | 星號 |
_ | 下划線 |
{} | 大括號 |
[] | 中括號 |
() | 括號 |
# | #號 |
+ | 加號 |
- | 減號 |
. | 點 |
! | 嘆號 |
| | 豎線 |
9.2 內嵌html
markdown支持html語法,可直接在文件用。
二、使用Paste Image插件粘貼截圖
1、安裝vscode插件
2、配置Paste Image插件
1)配置圖片存儲路徑
默認是markdown文件所在的文件夾,可以設置自定義文件夾(會自動創建),比如:
${currentFileDir}/images/
2)配置圖片前綴格式:
3)操作效果
示例:
參考文檔: