vscode 支持Markdown

我們?cè)賮?lái)看看另一個(gè) VS Code 支持的非常好的語(yǔ)言——Markdown。Markdown 在近些年已經(jīng)成為了主流的文檔書(shū)寫語(yǔ)言，比如GitHub 上的項(xiàng)目 readme 默認(rèn)就是 Markdown，微軟在13年也把 MSDN 的文檔從 XML 逐步地轉(zhuǎn)為 Markdown 了。

你在 VS Code 中書(shū)寫 Markdown 的時(shí)候，VS Code 會(huì)提供語(yǔ)法高亮。

VS Code 的定位是一個(gè)文本編輯器，而不是富文本編輯器，所以你并不能像一些 Markdown 編輯器一樣，獲得所見(jiàn)即所得的體驗(yàn)。但是 VS Code 提供了一個(gè) Markdown 預(yù)覽的效果。

VSCode Markdown的支持 側(cè)邊預(yù)覽

當(dāng)你在編輯器中打開(kāi)一個(gè) Markdown 文件后，你可以通過(guò)命令面板執(zhí)行 “Markdown: 打開(kāi)側(cè)邊預(yù)覽”（Markdown：Open Preview to the Side）來(lái)打開(kāi)預(yù)覽窗口。

這樣無(wú)論你在左側(cè)的編輯器還是在右側(cè)的預(yù)覽窗口滾動(dòng)時(shí)，另一個(gè)編輯器都會(huì)相對(duì)地滾動(dòng)，以保證你能同時(shí)看到對(duì)應(yīng)的 Markdown 內(nèi)容和預(yù)覽。

當(dāng)你修改這個(gè) Markdown 文件時(shí)，右側(cè)的預(yù)覽會(huì)自動(dòng)更新，而且也會(huì)跟隨你的光標(biāo)實(shí)時(shí)地滾動(dòng)。

另外，在側(cè)邊預(yù)覽打開(kāi)后，如果你打開(kāi)另一個(gè) Markdown 文件，側(cè)邊預(yù)覽也會(huì)實(shí)時(shí)地更新成新 Markdown 文件的預(yù)覽。

但有的時(shí)候，你可能會(huì)希望這個(gè)預(yù)覽窗口永遠(yuǎn)只顯示“某個(gè)” Markdown 文件的預(yù)覽，而不是根據(jù)編輯器內(nèi)文件而變化，那這時(shí)你可以執(zhí)行 Markdown: 在側(cè)邊打開(kāi)鎖定的預(yù)覽 （Markdown: Open Locked Preview to the Side）命令，這樣預(yù)覽窗口就會(huì)一直顯示你想要的這個(gè)Markdown文件的預(yù)覽內(nèi)容了。

VSCode Markdown的支持 同編輯器內(nèi)預(yù)覽

在側(cè)邊打開(kāi)預(yù)覽的好處是，你可以直接編輯內(nèi)容并且看到實(shí)時(shí)的更新。但是有的時(shí)候你只是希望閱覽 Markdown 的最終預(yù)覽，這時(shí)候，你就可以使用 “Markdown: 打開(kāi)預(yù)覽”（Markdown: Open Preview） 命令，在當(dāng)前編輯器組內(nèi)打開(kāi)預(yù)覽。

VSCode Markdown的支持 修改 Markdown 預(yù)覽格式

我們知道，Markdown 文件最終會(huì)被轉(zhuǎn)換成 HTML，然后在指定的網(wǎng)站上呈現(xiàn)出來(lái)。這些網(wǎng)站都有自己的一套樣式，為了能夠讓 VS Code 的 Markdown 預(yù)覽更接近 Markdown 文件發(fā)布后的效果，你可以為 Markdown 的預(yù)覽提供一套自定義的 CSS 樣式。比如說(shuō)你可以把最終網(wǎng)站上使用的 CSS 套用在 VS Code 的 Markdown 的本地預(yù)覽中。

要達(dá)到這個(gè)目的，配置也很簡(jiǎn)單。你可以在設(shè)置里，添加如下配置：

{
    "markdown.styles": [
        "Style.css"
    ]
}

JSON

通過(guò)給 markdown.styles 屬性指定 CSS 樣式的地址，你就能控制 Markdown 的預(yù)覽效果了。

除了 CSS 樣式，你也可以通過(guò)書(shū)寫插件，給 VS Code 添加新的 Markdown 語(yǔ)法和預(yù)覽，這個(gè)內(nèi)容我會(huì)在專欄的插件部分介紹。

VSCode Markdown的支持 Markdown 內(nèi)跳轉(zhuǎn)

相信你還記得，在專欄的編輯器部分，我們介紹過(guò)如何在符號(hào)（Symbols）中快速跳轉(zhuǎn)。這個(gè)功能在 Markdown 中顯得更加方便了。你可以通過(guò)符號(hào)，快速地在不同的章節(jié)直接進(jìn)行跳轉(zhuǎn)。

如果你打開(kāi)了面包屑功能的話，你也可以通過(guò)面包屑工具欄來(lái)跳轉(zhuǎn)。

VSCode Markdown的支持 Markdown 代碼折疊

在介紹代碼折疊功能（Folding）時(shí)，我們探討過(guò)VS Code支持插件來(lái)動(dòng)態(tài)地計(jì)算哪些代碼可以折疊，而不是簡(jiǎn)單地檢測(cè)花括號(hào)或者代碼縮進(jìn)。Markdown 就是一個(gè)特別好的例子，你可以在編輯 Markdown 時(shí)，根據(jù)章節(jié)來(lái)對(duì)內(nèi)容進(jìn)行折疊。