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 文件右上角的按鈕直接打開側邊預覽,或者通過快捷鍵 Ctrl + K V來調出。
值得一提的是,VS Code 的 Markdown 預覽默認渲染的是當前你正在編輯的文檔,不過如果你希望將某個文檔的預覽渲染鎖定不動,可以通過「Markdown: Toggle Preview Locking」調出一個鎖定某個文檔的預覽界面。
默認情況下,VS Code 的 Markdown 源文件和預覽界面是同步的,即你無論是在編輯界面還是預覽界面滾動,另一個界面都會同步你當前瀏覽的位置。
高效插件
VS Code 一個強大的地方在於它豐富的插件系統。VS Code 本身在 Visual Studio Marketplace 上面就有成千上萬的開源免費的插件,和 Markdown 相關的插件也數不勝數。安裝一個 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刪除線 Alt + C勾選/取消勾選任務清單項目Ctrl + M開啟 LaTeX 數學公式編寫
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 數學公式支持
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 編寫環境也一定有所提升。乾杯
閱讀更多 少數派 的文章