推荐一个好用的Markdown编辑器 Visual Studio Code

in #cn7 years ago (edited)

markdown-visual-studio-code.jpg
前一篇文章介绍了常用的Markdown语法,这一篇就介绍一个好用的Markdown 编辑器 Visual Studio Code。

VS Code

Visual Studio Code (VS Code) 是一个轻量但功能强大的代码编辑器,它可以运行在 Windows,macOS 以及 Linux 上,而且是开源和免费的。它内置 Javascript,TypeScript 和 Node.js 的支持,通过插件扩展还可以支持其他语言(如 C++,C#,Python,PHP,Go)和运行时(如 .NET 和 Unity)。

VS Code 的官网地址为:[https://code.visualstudio.com/]

2-1-vs-code.png

点击 Download for Mac,如果是其他平台,点击右侧的下拉箭头,选择对应平台的安装包下载即可。

将下载的安装包 VSCode-darwin-stable.zip 解压缩,得到 Visual Studio Code

2-2-vs-code.png

直接将它拖动到应用程序目录,这样在 Launchpad 中就可以找到它了。

2-3-vs-code.png

打开后是这样的。

2-4-vs-code.png

VS Code 主题

VS Code 提供了很多主题,通过 Code -> 首选项 -> 颜色主题 或 快捷键 Command + K Command + T 打开选择颜色主题面板。

2-5-vs-code.png

按上下箭头可以选择主题,按回车应用主题。

VS Code 工作区

写作时,我们通常都会把一类文章放在同一个目录中,这是一个好的习惯。在 VS Code 中有一个工作区的功能,可以把很多的目录添加到同一个工作区,这样只需要打开工作区,工作区包含的目录都打开了。

首先点击开始屏幕的 添加工作区文件夹。假如有下图所示的目录结构。

2-6-vs-code.png

可以将 Articlesbihu 添加到工作区,假如选择 bihu,此时生成了一个 无标题 的工作区。

2-7-vs-code.png

首先通过 文件 -> 将工作区另存为 菜单保存工作区,假如为 写作

2-8-vs-code.png

2-9-vs-code.png

下次就可以直接打开 写作.code-workspace 了。

假如还有一个 life 的目录,也是写作用的,并不需要跟 bihu 在同一个目录。在工作区空白处右击,选择 将文件夹添加到工作区

2-10-vs-code.png

选择 life 目录

2-11-vs-code.png

安装 Markdown Preview Enhanced 插件

Markdown Preview Enhanced 是一款为 Atom 以及 Visual Studio Code 编辑器编写的超级强大的 Markdown 插件。 这款插件意在让你拥有飘逸的 Markdown 写作体验。

选择最左侧的图标安装 VS Code 扩展。

2-12-vs-code.png

在搜索框中输入 Markdown Preview Enhanced

2-13-vs-code.png

点击 安装,成功后,重新加载 即可。

开始写作

在工作区中的目录中新建一个 .md 文件,如Markdown写作推荐编辑器 Visual Studio Code.md。此时就可以开始你的写作之旅了,如果对 Markdown 语法不熟悉,可以参考我的上篇文章 《Markdown写作常用的语法

在安装了 Markdown Preview Enhanced 插件后,在打开的 .md 编辑器窗口中右击,会有一个 Markdown Preview Enhanced: Open Preview 菜单

2-14-vs-code.png

选择它后,会打开 MPE Preview 窗口,在其中右击,会出现如下图所示的菜单

2-15-vs-code.png

选择 Open in Browser,会在浏览器中打开。

至此,一切都很顺利,唯一的缺陷就是图片上传。虽然Markdown Preview Enhanced 支持配置第三方文件托管,比如七牛,暂时不那么做了。