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语法模板

xaml 复制代码
{
	// 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 小时前
LLMs之PDF:zeroX(一款PDF到Markdown 的视觉模型转换工具)的简介、安装和使用方法、案例应用之详细攻略
pdf·markdown·zerox
会发光的猪。4 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
lucky九年5 小时前
vscode翻译插件
ide·vscode·编辑器
真·Wild·攻城狮6 小时前
【码农日常】Vscode Clangd初始化失败(Win10)
ide·vscode·编辑器
小堇不是码农6 小时前
在VScode中配置C_C++环境
c语言·c++·vscode
七灵微6 小时前
【测试】【Debug】vscode中同一个测试用例出现重复
ide·vscode·编辑器
哇咔咔哇咔19 小时前
使用Markdown编写适用于GitHub的README.md文件的目录结构
vscode·markdown
羊小猪~~1 天前
神经网络基础--什么是神经网络?? 常用激活函数是什么???
人工智能·vscode·深度学习·神经网络·机器学习
Eiceblue1 天前
Python 在PDF中绘制形状(线条、矩形、椭圆形等)
vscode·python·pycharm·pdf
tekin1 天前
vscode php Launch built-in server and debug, PHP内置服务xdebug调试,自定义启动参数配置使用示例
ide·vscode·php·launch.json·runtimeargs·php内置服务自定义参数