Markdown 是一种简洁的标记语言，它为我们提供了更方便的写作方式。在 macOS 上，有很多好用且美观的 Markdown 编辑器可供选择，但在 Windows 上，这样的编辑器却相对匮乏。幸运的是，微软在 2015 年开源了 Visual Studio Code(VS Code),这是一款轻量级的代码编辑器，从此开始崛起，并在编程开发领域占有一席之地。事实证明，VS Code 不仅方便编写代码，还能实现更多功能。今天我将向您介绍如何利用 VS Code 在全平台上打造一个完全免费的 Markdown 写作环境。

下载安装

您可以直接从 Visual Studio Code 的官方网站下载安装包，然后在 Windows 或 macOS 上直接安装。如果您使用的是 macOS 并已安装 Homebrew 包管理器，还可以使用以下命令直接安装 VS Code:

```

brew cask install visual-studio-code

```

接下来，Windows 和 macOS 的操作方法相同。以 Windows 为例进行介绍。

开箱即用

要撰写 Markdown 文档，最佳实践是指定一个文件夹作为您的 Markdown 工作区，然后将所有 Markdown 文件放在该文件夹下。接着，只需使用 VS Code 直接打开该文件夹即可。

使用 VS Code 打开 Markdown 文件时，按下 `Ctrl + N` 可以创建一个新的空白文件。若要在已有文件中打开 Markdown 文件，则可选择“打开文件”(File > Open),或通过拖放的方式将文件放到工作区中。此外，您还可以使用“保存”(File > Save All)或“另存为”(File > Save As)命令保存更改后的文件。

VS Code Markdown 编辑模式

在 VS Code 中撰写 Markdown 文档时，默认情况下编辑器会自动启用 Markdown 编辑模式。此时，您可以在编辑区域输入 Markdown 语法并查看实时预览效果。如果需要预览修改后的效果，可以按下 `Ctrl + Shift + P`,打开 Markdown 预览窗口。在预览窗口中，您还可以使用 `Ctrl + K V` 将光标定位到特定位置。

值得一提的是，VS Code 的 Markdown 预览默认只渲染当前正在编辑的文档。如果您希望锁定某个文档的预览渲染不变，可以使用“Markdown: Toggle Preview Locking”命令调出一个锁定某个文档的预览界面。默认情况下，VS Code 的 Markdown 源文件和预览界面是同步的；无论您是在编辑界面还是预览界面滚动页面，另一个界面都会同步更新位置信息。

Markdown 编辑区和预览区同步滚动

为了使 Markdown 编辑区与预览区保持同步滚动，您需要安装一款名为“Markmap”的扩展插件。安装完成后，即可在 VS Code 中通过单击右上角的“设置”(齿轮图标)来启用该扩展插件。启用后，您就可以在 Markdown 编辑区和预览窗口之间轻松切换并同步滚动了。

VS Code 是一个功能强大的编程编辑器，其中一个显著的优点就是其丰富的插件系统。在 Visual Studio Marketplace 上，有数以千计的开源免费插件供用户选择，其中不乏许多与 Markdown 相关的插件。安装 VS Code 插件非常简单，只需点击插件系统的图标，搜索相关插件名称，然后点击安装即可。

在这里，我推荐两个我日常使用的插件，它们足以覆盖我们日常工作中的绝大多数需求。

1. Markdown All in One

这个插件的名字就说明了它的功能：提供 Markdown 文档所需的所有功能。它在 Markdown 类插件中名列前茅，你可以在 Visual Studio Marketplace | Markdown All in One 处下载安装这个插件，或者直接在侧边栏插件系统中搜索 Markdown All in One 来安装。

Markdown All in One 具有非常强大的 Markdown 文档辅助编写功能，下面我将逐一介绍。

2. Markdown All in One 快捷键

Markdown All in One 内置了许多实用的快捷键，如下表所示。通过使用这些快捷键，我们可以轻松地为文本添加格式、执行操作等，大大提高了工作效率。

| 快捷键 | 操作 |

|------------|--------------------------------------------|

| Ctrl + B | 加粗 |

| Ctrl + I | 斜体 |

| Alt + S | 删除线 |

| Alt + C | 勾选/取消勾选任务清单项目 |

| Ctrl + M | 开启 LaTeX 数学公式编写 |

此外，Markdown All in One 还具有自动生成并更新目录、自动格式化表格等功能。利用命令「Format Document」，Markdown All in One 可以帮我们将 Markdown 源文件中的表格进行格式化，使之更易读。同时，它还可以自动补全本地图片的路径，方便我们插入图片素材。因此，建议将 Markdown 文档所需的图片素材保存在与源文件同一个路径的文件夹下，这样可以更好地利用这些便捷功能。

VS Code 中的 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 图，非常方便。

我们可以直接从 Visual Studio Marketplace | Markdown Preview Mermaid Support 这里下载这个插件，也可以从插件系统栏处搜索安装。

### 进阶操作

在 VS Code 中，你可以使用快捷键 `Ctrl + ,` 来添加自定义的 CSS 样式。例如：

```json

{

"markdown.styles": [

"Style.css"

]

}

```

然后在 `Style.css` 文件中编写你的自定义样式。

最后，如果你是少数派 Matrix 的作者，并且想要使用 Visual Studio Code 作为 Markdown 编辑器来撰写文章，可以尝试我的插件：vscode-sspai-markdown-helper。这个插件不仅可以帮助你管理 Markdown 文档，还能让你的 Markdown 预览样式与少数派官网格式保持一致。👍

关于如何在几乎任何平台上利用 VS Code 编写 Markdown 文档的介绍就到这里结束了。免费开源的 VS Code 为 Windows 用户提供了一个简单且美观的 Markdown 编写环境。相信在经过适当的配置后，你的 Markdown 编写环境一定会有所提升。干杯 🍻

> 下载少数派客户端

> 关注少数派公众号

> 让工作更有效率 ⏱

> 特惠、好用的硬件产品，尽在少数派sspai官方店铺 🛒