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

作者:神秘网友 发布时间:2020-09-08 07:22:41

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

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

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

vscode下载及安装

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

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

Fig.1 VScode安装包下载

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

markdown环境配置

主要参考这篇 博客 进行配置,博客中提到的插件商店如下图指示位置:
基于VSCode软件的markdown笔记环境配置

Fig.2 应用商店位置

主要插件有:

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

最终效果如下:

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

Fig.3 markdown环境配置

snippets插件配置

Ctrl+shift+P打开配置文件搜索窗口,输入setting,如下图所示:
基于VSCode软件的markdown笔记环境配置

Fig.4 配置文件搜索

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

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

Fig.5 打开配置文件

打开后,对于markdown部分改成以下设置:

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

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

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

Fig.6 snippet插件

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

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

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键然后就能弹出相应内容:
基于VSCode软件的markdown笔记环境配置

Fig.8 snippet使用

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

基于VSCode软件的markdown笔记环境配置相关教程

  1. HSQLDB:一款基于 Java 的嵌入式关系型数据库
  2. 基于游戏cookie cats数据的A/B测试
  3. 基于spark环境的中文文档词频统计程序(去停用词)
  4. 基于 Swoole 2 协程特性实现的 MySQL 连接池
  5. Linux(服务、软件管理):12---Zmodem协议的开启与使用(rz、sz命
  6. 基于django的个人博客网站建立(二)
  7. 2020茶艺师(初级)考试软件及茶艺师(初级)模拟考试软件
  8. 基于django的个人博客网站建立(一)