15、VSCode自定义Markwown编辑环境

2024-09-04 02:52
文章标签 自定义 15 环境 vscode 编辑 markwown

本文主要是介绍15、VSCode自定义Markwown编辑环境，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言 ：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

这篇关于15、VSCode自定义Markwown编辑环境的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1134791。

相关文章

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya（不是本人，claude AI）在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容： 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
阿里开源语音识别SenseVoiceWindows环境部署

阿里开源语音识别SenseVoiceWindows环境部署

SenseVoice介绍 SenseVoice 专注于高精度多语言语音识别、情感辨识和音频事件检测多语言识别： 采用超过 40 万小时数据训练，支持超过 50 种语言，识别效果上优于 Whisper 模型。富文本识别：具备优秀的情感识别，能够在测试数据上达到和超过目前最佳情感识别模型的效果。支持声音事件检测能力，支持音乐、掌声、笑声、哭声、咳嗽、喷嚏等多种常见人机交互事件进行检测。高效推
阅读更多...
安装nodejs环境

安装nodejs环境

本文介绍了如何通过nvm(NodeVersionManager)安装和管理Node.js及npm的不同版本，包括下载安装脚本、检查版本并安装特定版本的方法。 1、安装nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash 2、查看nvm版本 nvm --version 3、安装
阅读更多...
【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站，手机流量可以访问IPV6网络的服务，为什么不在电脑搭建Home Assistant（hass），来控制你的设备呢？@智能家居 @万物互联
阅读更多...
高并发环境中保持幂等性

高并发环境中保持幂等性

在高并发环境中保持幂等性是一项重要的挑战。幂等性指的是无论操作执行多少次，其效果都是相同的。确保操作的幂等性可以避免重复执行带来的副作用。以下是一些保持幂等性的常用方法： 唯一标识符： 请求唯一标识：在每次请求中引入唯一标识符（如 UUID 或者生成的唯一 ID），在处理请求时，系统可以检查这个标识符是否已经处理过，如果是，则忽略重复请求。幂等键（Idempotency Key）：客户端在每次
阅读更多...
pico2 开发环境搭建-基于ubuntu

pico2 开发环境搭建-基于ubuntu

pico2 开发环境搭建-基于ubuntu 安装编译工具链下载sdk 和example编译example 安装编译工具链 sudo apt install cmake gcc-arm-none-eabi libnewlib-arm-none-eabi libstdc++-arm-none-eabi-newlib 注意cmake的版本，需要在3.17 以上 下载sdk 和ex
阅读更多...
自定义类型：结构体(续)

自定义类型：结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐？ 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识，并举出了两个例子，我们再举出两个例子继续说明： struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s
阅读更多...
pip-tools：打造可重复、可控的 Python 开发环境，解决依赖关系，让代码更稳定

pip-tools：打造可重复、可控的 Python 开发环境，解决依赖关系，让代码更稳定

在 Python 开发中，管理依赖关系是一项繁琐且容易出错的任务。手动更新依赖版本、处理冲突、确保一致性等等，都可能让开发者感到头疼。而 pip-tools 为开发者提供了一套稳定可靠的解决方案。 什么是 pip-tools？ pip-tools 是一组命令行工具，旨在简化 Python 依赖关系的管理，确保项目环境的稳定性和可重复性。它主要包含两个核心工具：pip-compile 和 pip
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2