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

in cn •  7 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 支持配置第三方文件托管,比如七牛,暂时不那么做了。

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!