使用vscode編輯markdown文件(可粘貼截圖)

使用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語法如下:

![圖片描述](圖片鏈接 “圖片title”)

對應的html代碼:

<img src="圖片鏈接" alt="圖片描述" title="圖片title">

帶鏈接的圖片語法:

[![圖片描述](圖片鏈接 “圖片title”)](圖片鏈接)

示例如下:

 9、其它

9.1 轉義字符

如果需要使用markdown語法裏面的字符,可在字符前添加反斜槓(\)字符。

可做轉義的字符如下:

字符 名稱
\ 反斜槓
` 反引號
* 星號
_ 下劃線
{} 大括號
[] 中括號
() 括號
# #號
+ 加號
- 減號
.
! 歎號
| 豎線

 

9.2 內嵌html

markdown支持html語法,可直接在文件用。

二、使用Paste Image插件粘貼截圖

1、安裝vscode插件

 2、配置Paste Image插件

1)配置圖片存儲路徑

默認是markdown文件所在的文件夾,可以設置自定義文件夾(會自動創建),比如:

${currentFileDir}/images/

 2)配置圖片前綴格式: 

 3)操作效果

示例:

 

 

參考文檔: 

https://markdown.com.cn/basic-syntax/lists.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章