目錄

1.MarkDown簡(jiǎn)介

2.VSCode簡(jiǎn)介（Visual Studio Code）

3.VSCode中的MarkDown環(huán)境

4.MarkDown相關(guān)操作與常用語(yǔ)法

（1）創(chuàng)建新.md文件

（2）標(biāo)題

（3）換行與分段

（4）強(qiáng)調(diào)（加粗與斜體）

（5）列表（有序&無(wú)序）?

（6）插入圖片

（7）數(shù)學(xué)公式

（8）表格

（9）鏈接

（10）代碼塊

（11）分割線

（12）引用

（13）流程圖

（14）目錄

（15）md文件導(dǎo)出為其他文件

---

1.MarkDown簡(jiǎn)介

Markdown 是一種輕量級(jí)標(biāo)記語(yǔ)言，一個(gè)運(yùn)行于?Mac OS X、Windows和?Linux?之上的，針對(duì)于編寫(xiě)現(xiàn)代Web和云應(yīng)用的跨平臺(tái)源代碼編輯器

Markdown文件后綴名為 .md

? ? ? ? 優(yōu)點(diǎn)：

• 輕量化、易讀易寫(xiě)
• 對(duì)于圖片，圖表、數(shù)學(xué)式都有支持
• 許多網(wǎng)站都廣泛使用 Markdown 來(lái)撰寫(xiě)文檔
• 使用標(biāo)記語(yǔ)言語(yǔ)法編排文檔，簡(jiǎn)潔明了
• Markdown可以快速轉(zhuǎn)化為演講PPT、Word、PDF等產(chǎn)品文檔
• 可用于編寫(xiě)說(shuō)明文檔，以“README.md”的文件名保存在軟件的目錄下面

2.VSCode簡(jiǎn)介（Visual Studio Code）

Visual Studio Code（簡(jiǎn)稱“VS Code”）是Microsoft在2015年4月30日Build開(kāi)發(fā)者大會(huì)上正式宣布一個(gè)運(yùn)行于?Mac OS X、Windows和?Linux?之上的，針對(duì)于編寫(xiě)現(xiàn)代Web和云應(yīng)用的跨平臺(tái)源代碼編輯器

不僅僅是源代碼編輯器，Visual Studio Code已經(jīng)成為當(dāng)前最熱門的文本編輯器。

? ? ? ? 優(yōu)點(diǎn)：

• 跨平臺(tái)
• 開(kāi)源
• 簡(jiǎn)易
• 可擴(kuò)展，插件豐富
• 輕量快捷

3.VSCode中的MarkDown環(huán)境

需先安裝VSCode

在VSCode插件商店中搜索并安裝以下插件：

• Markdown All in One? ?——提供豐富的Markdown相關(guān)的快捷鍵、自動(dòng)補(bǔ)全功能，提高md文檔編寫(xiě)生產(chǎn)力
• Markdown Preview Ehanced? ?——用于渲染當(dāng)前編寫(xiě)文檔的效果同步預(yù)覽
• Paste Image? ?——用于快速引用圖片至Markdown文檔

????????注意：安裝完Markdown Preview Ehanced?可能會(huì)發(fā)生markdown換行相關(guān)語(yǔ)法錯(cuò)誤以下為解決辦法：

下載好所有插件重啟生效后，需要修改一下設(shè)置，點(diǎn)擊左下角齒輪按鈕，在搜索框中輸入break，將搜索選項(xiàng)中的Markdown Preview Ehanced：Break On Single New Line取消勾選。

以下為取消勾選操作完成圖：

4.MarkDown相關(guān)操作與常用語(yǔ)法

（1）創(chuàng)建新.md文件

在左側(cè)文件夾內(nèi)創(chuàng)建新的文件并后綴命名為.md，并點(diǎn)擊右上角預(yù)覽按鈕同步渲染文本效果

（2）標(biāo)題

在想要設(shè)為標(biāo)題的文本前進(jìn)加井號(hào)“#”，一級(jí)標(biāo)題加1個(gè)“#”，二級(jí)加2個(gè)，最多為6級(jí)

正文則直接寫(xiě)就好

效果如下：

（3）換行與分段

在MD中，回車并不能換行，只是將文字加個(gè)空格，如下左側(cè)編輯器中回車換行，但右側(cè)渲染出來(lái)的效果只是空了一格：

?想要換行需要在上一行后面加兩個(gè)空格再回車

如果要新起一段，則打兩個(gè)回車

（4）強(qiáng)調(diào)（加粗與斜體）

斜體：在文本兩端各加1個(gè)星號(hào)”*“? ? ? ? 快捷鍵：ctrl + i

加粗：在文本兩端各加2個(gè)星號(hào)”*“? ? ? ? 快捷鍵：ctrl + b

?

（5）列表（有序&無(wú)序）?

有序列表：輸入1.加一個(gè)空格（注意有點(diǎn)”.“），按回車會(huì)自動(dòng)補(bǔ)全編號(hào)

如果要輸入分級(jí)列表，回車并刪除新生成的序列號(hào)并再次輸入1.空格

如果要加入新的列表則在兩個(gè)列表之間新起一段，或者添加文字

無(wú)序列表：輸入星號(hào)"*"加空格或者加號(hào)"+"加空格或者減號(hào)"-"加空格

（6）插入圖片

復(fù)制所需圖片，在所需插入圖片位置按下快捷鍵ctrl+alt+v（不是ctrl+v噢），效果如下：

或者手動(dòng)把圖片加入md文件所在文件夾下，輸入 

（7）數(shù)學(xué)公式

以下采用latex排版方式對(duì)數(shù)學(xué)公式進(jìn)行演示，數(shù)學(xué)公式以 ”\“ 起始

行內(nèi)展示數(shù)學(xué)公式：用1個(gè)$$括起來(lái)? ? ? ? ? ? 快捷鍵：ctrl+m

另起一段展示數(shù)學(xué)公式：用兩個(gè)$$括起來(lái)? ?快捷鍵：連按兩下ctrl+m

?

（8）表格

第一行是表頭以”|“區(qū)分列

第二行是對(duì)齊方式，?"-"表示默認(rèn)對(duì)其即左對(duì)齊，在"-"左側(cè)加":"為左對(duì)齊，在右側(cè)加":"為右對(duì)齊，兩邊都加":"為劇中對(duì)齊（"-"的個(gè)數(shù)可隨便寫(xiě)，按照自己的喜好對(duì)齊即可，冒號(hào)一定要是英文字符！！！）

?按下alt+shift+f 可格式化文本編排，效果如下：

（9）鏈接

復(fù)制鏈接ctrl+v黏貼

直接黏貼則直接生成可點(diǎn)擊的鏈接

選中文字黏貼則生成可點(diǎn)擊的文字按鈕鏈接

（10）代碼塊

用兩行"```"括起來(lái),鍵盤左上方Tab鍵上方的點(diǎn)號(hào)，英文輸入法下輸入！！

在第一行"```"后輸入所用語(yǔ)言名字可指定語(yǔ)言提供高亮，如：

```javascript

```

（11）分割線

在所需添加分割線的文本下新起一行輸入三個(gè)減號(hào) "---"

（12）引用

?在引用的文字前加上大于號(hào)">"，如下：

（13）流程圖

運(yùn)用flowchart.js語(yǔ)法

基本語(yǔ)法：tag=>type: content:>url

• tag????????元素名字，可自定義
• type??????元素類型
• url? ? ? ? ?引用的鏈接，點(diǎn)擊相應(yīng)元素可出發(fā)鏈接

注意：冒號(hào)和名稱之間需要有一個(gè)空格

相關(guān)元素類型：

• 開(kāi)始（橢圓形）：start
• 結(jié)束（橢圓形）：end
• 結(jié)束（橢圓形）：end
• 多輸出操作（矩形）：parallel
• 條件判斷（菱形）：condition
• 輸入輸出（平行四邊形）：inputoutput
• 預(yù)處理/子程序（圣旨形）：subroutine
• content就是在框框中要寫(xiě)的內(nèi)容，注意type后的冒號(hào)與文本之間一定要有個(gè)空格。
• url是一個(gè)連接，與框框中的文本相綁定

關(guān)鍵字

• yes/true：condition類型變量連接時(shí)，用于分別表示yes條件的流向
• no/false：同上，表示否定條件的流向
• left/right：表示連線出口在節(jié)點(diǎn)位置（默認(rèn)下面是出口，如op3），可以跟condition變量一起用：cond(yes,right)
• path1/path2/path3：parallel變量的三個(gè)出口路徑（默認(rèn)下面是出口）

節(jié)點(diǎn)狀態(tài)

??為節(jié)點(diǎn)設(shè)置不同的狀態(tài)，可以通過(guò)不同的顏色顯示，其中狀態(tài)包括下面6個(gè)，含義如英文所示，

• past
• current
• future
• approved
• rejected
• invalid

以下是示例：

```flow st=>start: 開(kāi)始 e=>end: 結(jié)束 tag1=>operation: 任務(wù)1 tag2=>operation: 任務(wù)2 cond1=>condition: 是否進(jìn)行任務(wù)2st->tag1(right)->cond1 cond1(no)->tag1 cond1(yes)->tag2 tag2->e ```

（14）目錄

在要生成目錄的地方輸入 [TOC] ,markdown或根據(jù)分級(jí)標(biāo)題自動(dòng)生成目錄

?

（15）md文件導(dǎo)出為其他文件

點(diǎn)擊markdown preview ehanced提供的渲染預(yù)覽按鈕（使用這個(gè)渲染方式下導(dǎo)出的文件數(shù)學(xué)公式比較可靠亂碼概率較小）（鼠標(biāo)移植按鈕上方提示markdown preview ehanced相關(guān)或者M(jìn)PE相關(guān)）

如果只有看見(jiàn)一個(gè)預(yù)覽按鈕，那就是markdown preview ehanced隱藏了vscode自帶的markdown文檔預(yù)覽按鈕，所以只顯示了一個(gè)markdown preview ehanced的預(yù)覽按鈕，直接用就好。

若想恢復(fù)vscode自帶的markdown文檔預(yù)覽按鈕，則點(diǎn)擊左下角齒輪按鈕進(jìn)入設(shè)置，搜索"Hide Default VSCode Markdown Preview Buttons"取消勾選即可，如下為恢復(fù)狀態(tài)：

在預(yù)覽界面中右鍵，選擇谷歌瀏覽器導(dǎo)出為PDF

總結(jié)

以上是生活随笔為你收集整理的MarkDown在VSCode环境下使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。