15、VSCode自定义Markwown编辑环境

news2024/9/22 9:45:16

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

文章目录

  • 一、VsCode中安装Markdown插件
    • 1. Markdown简介
    • 2. Markdown Preview Enhanced
  • 二、VsCode中配置Markdown工作区
  • 三、VsCode中自定义Markdown语法模板
    • 1. User Snippets（用户代码片段）
    • 2. 自定义Markdown语法模板
  • 四、参考文献

一、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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2101673.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

每周12600元奖金池，邀你与昇腾算力共舞，openMind开发者盛宴启幕！

每周12600元奖金池，邀你与昇腾算力共舞，openMind开发者盛宴启幕！

小伙伴们&#xff0c;是否瞬间被这个标题唤醒了在OpenI启智社区“我为开源打榜狂”黄金时代的温馨记忆&#xff1f;打榜活动虽已谢幕&#xff0c;但大家相伴度过12期的那份激情与创新的共鸣&#xff0c;促使OpenI启智社区在国产算力崛起的浪潮中勇立潮头&#xff0c;推出了“芯…
阅读更多...
JavaScript是什么

JavaScript是什么

前言 初始JavaScript JavaScript是什么 JavaScript (简称 JS) 是世界上最流行的编程语言之一 是一个脚本语言, 通过解释器运行 主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行. JavaScript 最初只是为了完成简单的表单验证(验证数据合法性), 结果后…
阅读更多...
git 回滚的三种方式

git 回滚的三种方式

按照从旧到新的顺序 你依次提交了 1 2 3 4 5 现在你想回到1 如何操作 第一种方法 hard reset git reset --hard 执行命令后 你会发现 效果实现了 东西都回到了那次更改 但是2345的更改都没了 并且你会发现 你有更新 这是因为这个hard reset 只会改本地的 远程的不改 一更新就…
阅读更多...
7.Lab Six —— Cow Fork

7.Lab Six —— Cow Fork

首先切换分支到cow git checkout cow make clean Implement copy-on write 实现写时复制&#xff0c;为了测试方案&#xff0c;以及提供了一个cowtest的xv6程序&#xff0c;位于user/cowtest.c当中 课程给了一个合理的攻克计划&#xff1a; 修改uvmcopy()将父进程的物理页映…
阅读更多...
GO 下载依赖改成国内代理

GO 下载依赖改成国内代理

改成我们国内可用的代理地址 在命令提示符输入&#xff1a; 1 go env -w GOPROXYhttps://goproxy.cn 然后再做各种操作就可以成功了 另外一个问题&#xff1a; 手动下载某些依赖包&#xff0c;但是goland一直无法识别。 删掉了GOPATH多余的路径。 另外&#xff0c;启用了…
阅读更多...
STL—vector容器

STL—vector容器

目录 1、简单使用&#xff08;插入数据三种遍历方式&#xff09; 2、介绍 3、常用构造方法 3、扩容reserve和缩容shrink_to_fit 4、insert函数&#xff1a;在某个位置进行插入数据 5、vector使用库里面的find 6、vector< vector > 7、看源代码的技巧 1、简单使用&…
阅读更多...
大二必做项目贪吃蛇超详解之下篇游戏核心逻辑实现

大二必做项目贪吃蛇超详解之下篇游戏核心逻辑实现

贪吃蛇系列文章 上篇win32库介绍中篇设计与分析下篇游戏主逻辑 可以在Gitee上获取贪吃蛇代码。 文章目录 贪吃蛇系列文章5. 核心逻辑实现分析5. 3 GameRun5. 3. 1 PrintScore5. 3. 2 CheckVK5. 3. 3 BuyNewNode5. 3. 4 NextIsFood5. 3. 4 EatFood5. 3. 5 NotFood5. 3. 6 Chec…
阅读更多...
【OpenLayers 进阶】添加滤镜改变底图样式

【OpenLayers 进阶】添加滤镜改变底图样式

目录 一、前言二、准备工作三、实现方式四、总结 一、前言 项目实施过程中&#xff0c;需要根据不同的业务场景需求变换地图样式。如果客户提供的底图服务或自建底图服务是类似Mapbox这种矢量切片&#xff0c;那只要按照需求配置不同的样式文件即可。如果没有矢量切片&#xff…
阅读更多...
浅谈人工智能之Windows：基于ollama进行本地化大模型部署

浅谈人工智能之Windows：基于ollama进行本地化大模型部署

浅谈人工智能之Windows&#xff1a;基于ollama进行本地化大模型部署 引言 随着人工智能技术的飞速发展&#xff0c;大型语言模型&#xff08;LLMs&#xff09;已经成为推动自然语言处理领域进步的关键力量。然而&#xff0c;传统的云部署方式可能带来数据隐私、成本以及访问速…
阅读更多...
pikachu文件包含漏洞靶场通关攻略

pikachu文件包含漏洞靶场通关攻略

本地文件包含 先上传一个jpg文件&#xff0c;内容写上<?php phpinfo();?> 上传成功并且知晓了文件的路径 返回本地上传&#xff0c;并../返回上级目录 可以看到我们的php语句已经生效 远程文件包含 在云服务器上创建一个php文件 然后打开pikachu的远程文件包含靶场&…
阅读更多...
鸿蒙开发培训多少钱？

鸿蒙开发培训多少钱？

随着物联网技术的发展&#xff0c;HarmonyOS(鸿蒙系统)作为华为推出的一款面向全场景的分布式操作系统&#xff0c;正在逐步成为开发者们关注的焦点。对于那些想要进入这个新兴领域的开发者来说&#xff0c;参加鸿蒙开发培训是一个不错的选择。那么&#xff0c;这样的培训究竟需…
阅读更多...
【Hadoop|HDFS篇】HDFS概述

【Hadoop|HDFS篇】HDFS概述

1. HDFS产出背景及定义 1.1 HDFS产生背景 随着数据量越来越大&#xff0c;在一个操作系统存不下所有的数据&#xff0c;那么就分配到更多的操作系 统管理的磁盘中&#xff0c;但是不方便管理和维护&#xff0c;迫切需要一种系统来管理多台机器上的文件&#xff0c;这 就是分布…
阅读更多...
Oracle授权如何购买？多少钱？如何计算？

Oracle授权如何购买？多少钱？如何计算？

前言 作为DBA时常也会遇到一些商务的问题&#xff0c;比如购买Oracle 的授权&#xff0c;比如老板问用oracle有没有法律风险&#xff0c;这个组件是否收费&#xff1f;如何计算授权数&#xff1f;等等&#xff0c;本文根据博主的经验和一些Oracle公开的资料&#xff0c;来做一个…
阅读更多...
DBNET文字检测

DBNET文字检测

原文：DBNET文字检测 - 知乎 (zhihu.com) 一、DBNET介绍 DBNET核心采用的是基于分割的做法进行文本检测，即将每个文本块都进行语义分割，然后对分割概率图进行简单二值化、最终转化得为box或者poly格式的检测结果。除去网络设计方面的差异，最大特点是引入了Differentiable …
阅读更多...
Python 从入门到实战6（二维列表）

Python 从入门到实战6（二维列表）

我们的目标是&#xff1a;通过这一套资料学习下来&#xff0c;通过熟练掌握python基础&#xff0c;然后结合经典实例、实践相结合&#xff0c;使我们完全掌握python&#xff0c;并做到独立完成项目开发的能力。 之前的文章我们通过举例学习了python 中列表的相关操作&#xff0…
阅读更多...
什么是阿凡达2.0直播模式？

什么是阿凡达2.0直播模式？

要了解什么是什么是阿凡达2.0直播模式,首先要了解什么是的阿凡达直播模式。 我们知道真人直播&#xff0c;播不了几个小时&#xff0c;主播就讲累了。且真人主播的价格又贵&#xff0c;以小时计费。所以很多数字人厂商推出了数字人直播。用数字人代替真人直播。在前几年的时候…
阅读更多...
强烈建议！重罚自燃车企

强烈建议！重罚自燃车企

文 | AUTO芯球 作者 | 雷慢 想想就叫人害怕啊&#xff0c; 广东惠州电车自燃那个事&#xff0c;你们看了吗 3辆汽车和多辆电动自行车被烧毁&#xff0c;住宅变危房&#xff0c; 最触目惊心的还是浓烟&#xff0c;许多住户咳呛不止&#xff0c; 周边小区也惨遭浓烟毒害&…
阅读更多...
Css：css的属性选择器vs关系选择器及css中伪元素

Css：css的属性选择器vs关系选择器及css中伪元素

css的属性选择器&#xff1a; 注&#xff1a;属性值只能由数字&#xff0c;字母&#xff0c;下划线&#xff0c;中划线组成&#xff0c;并且不能以数字开头。 1、[属性] 选择含有指定属性的元素&#xff0c;用[]中括号表示。 <style> [title]{color:red;} p[title]{col…
阅读更多...
「Python数据分析」Pandas进阶，使用groupby分组聚合数据（一）

「Python数据分析」Pandas进阶，使用groupby分组聚合数据（一）

在数据分析过程中&#xff0c;groupby语句&#xff0c;起到对原始数据集&#xff0c;进行分组和聚合的作用。我们在进行数据处理的时候&#xff0c;经常需要对不同的数据维度&#xff0c;以及不同的数据切片集合&#xff0c;进行操作和处理。 比如说&#xff0c;假设我们有全国…
阅读更多...
零基础国产GD32单片机编程入门(十二)FreeRTOS实时操作系统移植含源码

零基础国产GD32单片机编程入门(十二)FreeRTOS实时操作系统移植含源码

文章目录 一.概要二.什么是实时操作系统三.FreeRTOS的特性四.FreeRTOS的任务详解1.任务函数定义2.任务的创建3.任务的调度原理 五.FreeRTOS系统移植到GD32F103C8T6单片机1.硬件准备2.程序移植3.调试FreeRTOS任务调度 六.工程源代码下载七.小结 一.概要 FreeRTOS是一个迷你的实…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023