流行的js或者jQuery的markdown编辑器 markdown js插件

文章目录

• 前言
• 步骤

• ==1）安装基础插件==
• ==2）熟悉插件的操作==

• 1. 链接的插入
• 2. 转为网页（html）
• 3. 创建目录
• 4. 预览

• 3）==探索其他插件==

• 语法检查插件
• 表情包插件
• pdf、jpg转换插件
• 表情包补全插件
• 预览插件
• 一键插入图片插件
• 表格插件

• 小结

前言

如题，介绍如何在VSCode上配置markdown插件（包括：一键插入图片、语法检查、表情包、pdf、预览、表格）。

步骤

1）安装基础插件

打开VSCode的插件栏，然后搜索“markdown”，如下图。左侧栏显示了很多很多插件，也有很多黑科技，我们直接选第一个先（这个应该是基础的、最受欢迎的插件，因为排在第一位）。然后点中间红色框的install，就能轻松实现插件的安装（注意：我这已经装了，所以是uninstall）。

2）熟悉插件的操作

这一步稍麻烦，说实话，我之前早就用过这个插件，然而过段时间没用，快捷键啥的都忘了，这也是我想写这个博客的原因，把这个理顺一点，顺便看能不能学到很实用但是更复杂的操作。

第一步，肯定就是研究这个插件自带的readme了，也就是：

• Markdown All in One

All you need for Markdown (keyboard shortcuts, table of contents, auto preview and more).

可以，第一句就简单清晰地介绍了其功能。

准备一个一个读过去，好好研究一下。

这里记录几个有用的功能：

1. 链接的插入

ctrl+c复制网址，然后直接ctrl + v到选中的text就行。

2. 转为网页（html）

Ctrl+Shift+p打开palette，搜索html，然后选择：下面红框内容就行。

也有快捷键：Ctrl+Alt+p。
也可以自己设置快捷键：Ctrl+Shift+p打开palette，搜索html，选择上面红框右边的齿轮状（即设置），就进入了如下界面，可以自定义快捷键：

3. 创建目录

Ctrl+Shift+p打开palette，搜索content，然后选第一个就行。如下图。

目录会自动更新，还是可以的。

也可以自定义快捷键，方法同上。

4. 预览

我自己设置了preview to the side的快捷键，
这样就能同步了，还可以。

3）探索其他插件

这里列出一些其他插件：

语法检查插件

1. markdownlint https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint 这个是给markdown语言做语法检查的：Markdown linting and style checking for Visual Studio Code，其实就是制定了一系列规则，然后在当前markdown文档中找到这些规则的violations。

此外，在搜索markdownlint的时候，我看到了相关的插件：Markdown Extension Pack，这里面打包了很多markdown常用插件，只需要下载这个，就可以下载很多插件，如转pdf，表格制作，Math公式等等。我不打算装这个，但是可以参考其中的列表，去下载我需要的插件。

表情包插件

2. Markdown Emojihttps://marketplace.visualstudio.com/items?itemName=bierner.markdown-emojiAdds emoji syntax support to VS Code's built-in markdown preview 添加表情的，这个可以有。如下图，还行还行
   
   全部表情的cheatsheet在https://www.webfx.com/tools/emoji-cheat-sheet/

pdf、jpg转换插件

3. Markdown PDF https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf This extension converts Markdown files to pdf, html, png or jpeg files. 具体操作：
   Ctrl+Shift+p，然后输入Export，就可以调出将markdown转化为pdf，html，图片等形式的选项。太牛了。

表情包补全插件

4. :emojisense: https://marketplace.visualstudio.com/items?itemName=bierner.emojisense Adds suggestions and autocomplete for emoji to VS Code.表情包补全。在windows上使用Ctrl+i，就可以调出下图的栏目，太酷了。

预览插件

5. Markdown Preview Enhancedhttps://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhancedMarkdown Preview Enhanced ported to vscode 增强了对预览界限的美化及功能。不过要自定义keybinding。如下：
6. Markdown Preview Github Styling 和 Markdown Checkboxes，分别可以展示github形式的markdown，以及添加checkbox。这里的显示预览快捷键和预览的快捷键是一样的。

一键插入图片插件

7. Markdown Image 插入图片的插件。https://marketplace.visualstudio.com/items?itemName=hancel.markdown-image 很牛，右键就可以插入图片。

表格插件

8. Markdown Table https://marketplace.visualstudio.com/items?itemName=TakumiI.markdowntable 调整表格相关的各种操作。如下图，其实功能还挺多。
   但是，注意到：Tab并不能移到下一个cell，我认为原因是和其他键冲突了。所以我后面将移到下一个cell的快捷键改成了Shift+Tab。

但是如何创建表格呢？

Ctrl+Shift+p ，选择下图红框那个就行：

小结

以上。到此为止。