15、VSCode自定义Markwown编辑环境

前言 ：Visual Studio Code (VSCode) 是微软推出的一款开源编辑器，使用 Electron 打造，与 Atom 齐名，不过随着 Atom 社区的渐渐缩小，VSCode 的影响力开始越来越大了。VSCode 内置了 Markdown 语言及预览的支持，很适合用于编辑 Markdown 文档。Markdown 是一种标记语言，可以在写文档的同时，通过添加一些特殊标记，快速完成文档的排版，很多程序员都喜欢使用 Markdown 来写文档，另外，github 也使用 Markdown 作为仓库 README 的标准语言，可以说是写技术文档的首选方案。

文章目录

一、VsCode中安装Markdown插件

1. Markdown简介

Markdown是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。Markdown格式是为程序员而生，对代码、图片、超链接、列表、层级结构、表格有很好的设计。甚至还有很强的扩展能力，例如安装相应的插件后，对Latex公式、流程图、目录都可以很好的显示和表达。
Markdown格式也可以很容易的转换为其他的格式，例如HTML，PDF格式等。总之，怎么夸赞都不为过。

2. Markdown Preview Enhanced

Markdown Preview Enhanced(简称MPE)是一款为Atom以及 Visual Studio Code编辑器编写的超级强大的Markdown插件。 这款插件意在让你拥有飘逸的Markdown写作体验。vscode中安装插件如下图。
安装完成后按下快捷键Ctrl+Shift+P，打开命令面板，输入“Markdown Preview Enhanced: Open Preview”命令，然后回车，就会打开一个预览窗口。这样我们就可以边写Markdown边预览生成的Markwodn文章了。

二、VsCode中配置Markdown工作区

如果要开始写作，首先要创建一个文件夹作为工作区，在想要的位置创建一个项目文件夹，笔者这里建的项目名叫 MarkdownProject：

在Vscode中打开项目文件夹，点击如下两个按钮可以创建文件和文件夹：

在项目根目录下创建一个目录叫做 img，作用是在本地存放图片。接着在根目录下创建一个文件 xx.md，这个文件是文档的源文件，完成创建之后，即可在其中使用 Markdown 语法进行写作了。

三、VsCode中自定义Markdown语法模板

1. User Snippets（用户代码片段）

用户代码片段是一种在编辑器中快速插入代码的功能。它可以帮助我们快速输入常用的代码模板，提高工作效率。
点击左下角齿轮【设置 - 配置用户代码片段】：

然后会在编辑器中间弹出一个界面：

界面分为两个部分，分割线上面是 现有代码片段，表示已经创建了相关文件，分割线下面是新代码片段，表示可以创建相关文件。如果你没有配置过任何文件，现有代码片段中应该是没有任何项的，你现在需要新建一个代码片段。比如本文示例是Markdown项目，那就在 搜索框 输入Markdown，就会显示 Markdown.json(Markdown)。
点击进去默认代码如下图：

这就是使用说明，新建的所有代码片段都差不多，内容是：

把你的片段放在这里。每个代码段都在一个代码段名称下定义，并具有前缀、正文和描述。
前缀是用来触发代码段的，主体将被扩展和插入。可能的变量：
$1， $2用于制表停止，0 用于最后的光标位置， 0用于最后的光标位置，0用于最后的光标位置，{1:label}， ${2:another}用于占位符。连接具有相同id的占位符。

2. 自定义Markdown语法模板

{
    // 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:
    // "Print to console": {
    //     "prefix": "log",
    //     "body": [
    //         "console.log('$1');",
    //         "$2"
    //     ],
    //     "description": "Log output to console"
    // }
    "H1": {
    "prefix": "/1",
    "body": ["# $0"]
  },
  "H2": {
    "prefix": "/2",
    "body": ["## $0"]
  },
  "H3": {
    "prefix": "/3",
    "body": ["### $0"]
  },
  "H4": {
    "prefix": "/4",
    "body": ["#### $0"]
  },
  "H5": {
    "prefix": "/5",
    "body": ["##### $0"]
  },
  "H6": {
    "prefix": "/6",
    "body": ["###### $0"]
  },
  "bold粗体": {
    "prefix": "/b",
    "body": ["**$1**$2"]
  },
  "italic斜体": {
    "prefix": "/i",
    "body": ["*$1*$2"]
  },
  "underline下划线": {
    "prefix": "/u",
    "body": ["<u>$1</u>$2"]
  },
  "line-through删除线": {
    "prefix": "/x",
    "body": ["~~$1~~$2"]
  },
  "divider分割线": {
    "prefix": "/d",
    "body": ["------", "$1"]
  },
  "link链接": {
    "prefix": "/k",
    "body": ["[$2]($1)$3"]
  },
  "image图片": {
    "prefix": "/img",
    "body": ["![$2]($1)$3"]
  },
  "inline code行内代码": {
    "prefix": "/cl",
    "body": ["`$1`$2"]
  },
  "code block代码片段": {
    "prefix": "/c",
    "body": ["```$1", "$0", "```"]
  },
  "ul有序列表": {
    "prefix": "/ul",
    "body": ["- $0"]
  },
  "ol无序列表": {
    "prefix": "/ol",
    "body": ["1. $0"]
  },
  "task任务列表": {
    "prefix": "/task",
    "body": ["- [ ] $0"]
  },
  "quote引用": {
    "prefix": "/q",
    "body": ["> $1", "$2"]
  },
  "table表格": {
    "prefix": "/t",
    "body": [
      "|  $1  |  $2  |  $3  |  $4  |",
      "| ---- | ---- | ---- | ---- |",
      "|  $5  |  $6  |  $7  |  $8  |",
      "|  $9  |  $10 |  $11 |  $12 |",
      "|  $13 |  $14 |  $15 |  $16 |"
    ]
  },
  "bash代码片段": {
    "prefix": "/bash",
    "body": ["```bash", "$0", "```"]
  },
  "html代码片段": {
    "prefix": "/html",
    "body": ["```html", "$0", "```"]
  },
  "js代码片段": {
    "prefix": "/js",
    "body": ["```js", "$0", "```"]
  },
  "css代码片段": {
    "prefix": "/css",
    "body": ["```css", "$0", "```"]
  },
  "vue代码片段": {
    "prefix": "/vue",
    "body": ["```vue", "$0", "```"]
  },
  "java代码片段": {
    "prefix": "/java",
    "body": ["```java", "$0", "```"]
  },
  "python代码片段": {
    "prefix": "/python",
    "body": ["```python", "$0", "```"]
  },
  "ruby代码片段": {
    "prefix": "/ruby",
    "body": ["```ruby", "$0", "```"]
  },
  "swift代码片段": {
    "prefix": "/swift",
    "body": ["```swift", "$0", "```"]
  },
  "kotlin代码片段": {
    "prefix": "/kotlin",
    "body": ["```kotlin", "$0", "```"]
  },
  "c代码片段": {
    "prefix": "/c",
    "body": ["```c", "$0", "```"]
  },
  "c++代码片段": {
    "prefix": "/c++",
    "body": ["```c++", "$0", "```"]
  },
  "go代码片段": {
    "prefix": "/go",
    "body": ["```go", "$0", "```"]
  },
  "php代码片段": {
    "prefix": "/php",
    "body": ["```php", "$0", "```"]
  },
  "C#代码片段": {
    "prefix": "/csharp",
    "body": ["```csharp", "$0", "```"]
  },
  "scala代码片段": {
    "prefix": "/scala",
    "body": ["```scala", "$0", "```"]
  },
  "typescript代码片段": {
    "prefix": "/typescript",
    "body": ["```typescript", "$0", "```"]
  },
  "xaml代码片段": {
    "prefix": "/xaml",
    "body": ["```xaml", "$0", "```"]
  },
  "模板调用":{
    "prefix": "/csharp-template",
    "body": [
    "@[TOC](这里写自定义目录标题)",
    ">前言 `提示：`",
    ">开发平台：Win10 64位",
    "开发环境：VS2022(64位) Preview",
    ".NET Framework：.NET 6",
    "例如：。",
    "---",
      "[TOC]",
      "`提示：以下是本篇文章正文内容，下面案例可供参考`",
      "# 一、章节一",
      "示例：Redis是一种开源的内存数据结构存储系统，它支持多种数据结构，如字符串、哈希、列表、集合、有序集合等。它可以用作数据库、缓存和消息中间件，并在性能、可扩展性和灵活性方面表现出色。",
      "![xx picture](./img/xx.png)",
      "## 1.1 什么是.NET？",
      "代码如下（示例）：",
      " ```csharp",
      "```",
      "# 二、章节二",
      "## 创建一个表格",
      "### 一个简单的表格是这么创建的：",
      "项目     | Value",
      "-------- | -----",
      "电脑  | $1600",
      "手机  | $12",
      "导管  | $1",
      "### 设定内容居中、居左、居右的表格",
      "使用`:---------:`居中",
      "使用`:----------`居左",
      "使用`:------------`居右",
      "| 第一列       | 第二列         | 第三列        |",
      "|:-----------:| -------------:|:-------------|",
      "| 第一列文本居中 | 第二列文本居右  | 第三列文本居左 |",
      "代码如下（示例）：",
      " ```csharp",
      "```",
      "该处使用的url网络请求的数据。",
      "---",
      "# 三、总结",
      "提示：这里对文章进行总结：",
      "例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。",
      "# 四、参考文献",
      "- 4.1 ",
      "- 4.2 "
        ]
  }
}

接下来，可以在 Markdown 文件中输入/，我们就可以不用再输入 Markdown 语法，也不用记各种快捷键，一个/解决所有问题。

四、参考文献

• 1 https://juejin.cn/post/7238230111941394488
• 2 https://zhuanlan.zhihu.com/p/56699805
• 3 https://cloud.tencent.com/developer/article/2071159
• 4 https://www.cnblogs.com/jiaoshou/p/15087430.html
• 5 https://blog.csdn.net/sunddy_x/article/details/126286400
• 6 https://zhuanlan.zhihu.com/p/589683006
• 7 https://www.jianshu.com/p/60560e2af9b7