基于VSCode软件的markdown笔记环境配置

前期在CSDN上用markdown写了一些博客，使用时还是觉得不太方便，尤其是在编写公式时，效率十分低下。但Markdown本身还是一款非常不错的笔记撰写工具，所以一直琢磨着怎么改善其使用体验。然后近来无意中发现可以通过配置VSCODE+Markdown+snippet来提高Markdown的工作能力，此篇笔记就来记录下配置过程吧！

vscode下载及安装

VScode下载安装相当简单，直接进入 官网，选择与自己电脑系统相匹配的安装包下载即可。

Fig.1 VScode安装包下载

如图1所示，VScode可安装于windows系统、linux系统以及mac系统。本电脑是windows系统64位的，为了安装方便，就直接选择了红框部分的System Installer 64 bit安装，点击后会自动下载一个exe文件，下载好后，直接双击安装。

markdown环境配置

主要参考这篇 博客 进行配置，博客中提到的插件商店如下图指示位置：

Fig.2 应用商店位置

主要插件有：

• Markdown all in one
• Markdown Preview Enhanced
• Markdown Preview GitHub styling
• Markdown Shortcut
• Auto-open Markdown Preview
• Markdown Toc

最终效果如下：

Fig.3 markdown环境配置

snippets插件配置

先Ctrl+shift+P打开配置文件搜索窗口，输入setting,如下图所示:

Fig.4 配置文件搜索

选择箭头指向的条目，点击进去，得到下图设置界面，先在框内搜索markdown，然后点击下面的：Edit in settings.json。

Fig.5 打开配置文件

打开后，对于markdown部分改成以下设置：

    "[markdown]": {
        
        "editor.formatOnSave": true,
        "editor.renderWhitespace": "all",
        "editor.quickSuggestions": {
            "other": true,
            "comments": true,
            "strings": true
        },
        "editor.acceptSuggestionOnEnter": "on"
    }

最后尝试自己新建一个snippet片段:

Fig.6 snippet插件

如图6所示步骤，点击User Snippets，得到下面的搜素框：

Fig.7 创建选择 可选择`markdown.json`或`new Global snippets file`。本文选择前者，打开后，可在这个`json`文件中添加自己snippet（以下是个人创建的两个简单的snippet）：

	// Place your snippets for markdown here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"markdown website link": {
		"prefix": "mkhttp",
		"body": [
			"[${1:网址}]($2)"
		],
		"description": "Log output to console"
	},	

	"markdown insert figure": {
		"prefix": "mkfig",
		"body": [
			"![${1:picture_name}](./fig/${1:picture_name}.png)",
			"<center>Fig.$2 ${1:picture_name} </center></td>",
			"$3"
		],
		"description": "Log {output to console}"
	},

以第一个为例，snippet的名称是markdown website link,触发关键字是mkhttp,片段内容是"[${1:网址}]($2)"。我们在自己撰写的markdown文件中输入关键字mkhttp,按tab键然后就能弹出相应内容:

Fig.8 snippet使用

后续可以把复杂的公式格式变成特定的snippet来快速调用。