Markdown 這門簡潔的標記語言，讓我們寫文章有了更方便的途徑。macOS 上面好用又好看的 Markdown 編輯器百花齊放，但在 Windows 上，好用的 Markdown 編輯器真是少之又少。

在 2015 年，微軟開源了 Visual Studio Code 這一輕量級的代碼編輯器，從此 VS Code 便突飛猛進，在編程開發領域佔下一席之地。事實證明，VS Code 除了方便寫代碼，還能幹更多的事情。今天我就來介紹一下如何利用 VS Code，在全平臺上打造一個完全免費的編寫 Markdown 的極佳環境。

下載安裝

我們可以直接從 Visual Studio Code 的官網 上下載 VS Code 的安裝包，在 Windows 或 macOS 上面直接安裝即可。

Visual Studio Code

如果你在 macOS 上使用 Homebrew 包管理器，也可以使用下面的命令直接安裝 VS Code：

brew cask install visual-studio-code

接下來 Windows 和 macOS 的操作方法一致，下面我以 Windows 為例進行介紹。

開箱即用

利用 VS Code 編寫 Markdown 的最大方便之處就是它能做到「開箱即用」。你可以直接打開 VS Code，快捷鍵 Ctrl + N 創建一個以 .md 為文件擴展名的 Markdown 文件，就可以開始書寫 Markdown 了。

利用 VS Code 撰寫 Markdown 文檔的最佳實踐是指定一個文件夾作為你的 Markdown 工作區，之後將你的 Markdown 文件全部放在這個文件夾下，然後用 VS Code 直接打開這個文件夾即可。

VS Code Markdown 編輯模式

上圖是一個典型的 VS Code Markdown 編輯器編輯模式的樣子，其中整個編輯器分為三欄：

• 側邊欄
• 編輯區域
• 預覽區域

其中側邊欄上半部分顯示的是當前工作區文件夾下的文件，包括 Markdown 文件和素材。下半部分可以展開「Outline」視圖，即大綱，可以根據當前正在編輯的 Markdown 文件顯示其各級標題的大綱目錄。

預覽 Markdown 文檔

VS Code 強大之處在於其各種內置功能，統一操作這些功能的面板叫做「Command Palette」，即「命令面板」。我們可以直接通過快捷鍵 Ctrl + Shift + P 調出命令面板，輸入關鍵詞，找到相應的命令並回車來執行。預覽 Markdown 文件的命令叫做「Markdown: Open Preview to the Side」，即「在旁邊打開 Markdown 預覽」，我們可以通過這一方式直接調出側邊的 Markdown 預覽面板。

打開 Markdown 預覽

當然，我們也可以通過每個 Markdown 文件右上角的按鈕直接打開側邊預覽，或者通過快捷鍵 Ctrl + K V來調出。

按鈕調出 Markdown 預覽

值得一提的是，VS Code 的 Markdown 預覽默認渲染的是當前你正在編輯的文檔，不過如果你希望將某個文檔的預覽渲染鎖定不動，可以通過「Markdown: Toggle Preview Locking」調出一個鎖定某個文檔的預覽界面。

默認情況下，VS Code 的 Markdown 源文件和預覽界面是同步的，即你無論是在編輯界面還是預覽界面滾動，另一個界面都會同步你當前瀏覽的位置。

Markdown 編輯區和預覽區同步滾動

高效插件

VS Code 一個強大的地方在於它豐富的插件系統。VS Code 本身在 Visual Studio Marketplace 上面就有成千上萬的開源免費的插件，和 Markdown 相關的插件也數不勝數。安裝一個 VS Code 的插件非常簡單：通常情況下，我們直接點擊下圖中插件系統的圖標，搜索相關插件的名稱，點擊安裝即可。

VS Code 插件系統

這裡我僅推薦我日常使用的兩個插件，因為這兩個插件就足以覆蓋我們日常使用的絕大多數功能。

Markdown All in One

就如其名字所言：Markdown 大一統插件。這個插件直接集成了大部分我們撰寫 Markdown 時所需要的功能，是 Markdown 類插件中下載榜榜首。我們可以在 Visual Studio Marketplace | Markdown All in One 處下載安裝這個插件，或者直接在側邊欄插件系統中搜索 Markdown All in One 來安裝。

Markdown All in One

Markdown All in One 這個插件有著非常強大的 Markdown 文檔輔助編寫功能，下面我來一一介紹。

快捷鍵

快捷鍵操作Ctrl + B加粗Ctrl + I斜體Alt + S刪除線

Markdown All in One 內置有上表所示的快捷鍵，我們可以直接利用快捷鍵將文字賦予格式、或進行某種操作，非常方便。

自動生成並更新目錄

生成目錄

Markdown All in One 插件可以自動根據你正在編輯的文檔，生成相應的目錄。我們利用快捷鍵 Ctrl + Shift + P 調出「命令面板」，輸入「目錄」，即可直接調用命令「Markdown: 創建目錄」。之後如果你更新了文章內容，也可以直接通過命令「Markdown：更新目錄」更新。

自動格式化表格

格式化表格

利用命令「Format Document」，Markdown All in One 可以直接幫我們將 Markdown 源文件中的表格進行格式化，使之更加易讀。

圖片等本地素材自動補全路徑

自動補全本地素材路徑

Markdown All in One 可以直接幫助我們補全本地圖片的路徑，這個功能非常方便，因此我也推薦將 Markdown 文檔所需的圖片素材保存在一個和源文件同一個路徑的文件夾下，比如這一的安排方式就比較合理：

.
├── 1 文章一
│ ├── image/
│ └── Post1.md
├── 2 文章二
│ ├── image/
│ └── Post2.md
└── 3 文章三
 ├── image/
 └── Post3.md
...

LaTeX 數學公式支持

LaTeX 數學公式

Markdown All in One 直接提供了基於 LaTeX 的數學公式渲染，支持行內數學公式，以及整段的數學公式。

Markdown Preview Mermaid Support

前面的插件雖然幾乎覆蓋了我們日常編寫 Markdown 幾乎全部需求，但是它並沒有支持 Mermaid 渲染引擎。由於我偶爾會使用 Markdown 繪製流程圖、時序圖或甘特圖，因此我也會使用 Mermaid 渲染引擎來輔助我的繪製。這裡 Markdown Preview Mermaid Support 這個插件就讓 VS Code 的 Markdown 預覽能夠正確渲染 Mermaid 圖，非常方便。

Markdown Preview Mermaid Support

我們可以直接從 Visual Studio Marketplace | Markdown Preview Mermaid Support 這裡下載這個插件，也可以從插件系統欄處搜索安裝。

進階操作

VS Code 最強大的地方在於其無窮無盡的自定義功能。可能你覺得默認的 Markdown 預覽風格並不符合你的口味，那麼你可以直接在 VS Code 的設置中（快捷鍵 Ctrl + , 打開）自定義 Markdown 渲染使用的 CSS 樣式文件：

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

其中的 Style.css 就是更換默認 Markdown 渲染使用樣式的 CSS 文件，這裡需要填寫你所使用文件的絕對路徑。

小結

VS Code 強大的插件系統，以及開源的方便性，讓我們可以從幾乎任何角度、利用各種手段去自定義我們的 Markdown 編寫環境（比如自定義 VS Code 的 CSS 修改樣式、自定義編譯自動化將 Markdown 編譯為 HTML、PDF 等）。更多進階的操作功能，請直接參考微軟官方的開發文檔：Markdown and Visual Studio Code

最後說一句，如果你是少數派 Matrix 作者，又恰巧想用 VS Code 作為 Markdown 編輯器為 Matrix 撰寫文章，可以來試試我為 VS Code 寫的插件：vscode-sspai-markdown-helper，不僅能夠幫你管理 Markdown 文檔，還能讓你的 Markdown 預覽樣式直接匹配少數派官網格式。

利用 VS Code 在幾乎任何平臺上面編寫 Markdown 文檔的介紹到這裡就結束了。免費開源的 VS Code 讓 Windows 上也能有一個簡單又漂亮的 Markdown 編寫環境。相信經過配置，你的 Markdown 編寫環境也一定有所提升。乾杯

閱讀更多 少數派 的文章

關鍵字: 編輯器 標記語言 教你做