VScode 打造 Markdown 编辑器

在之前的博文中我分别介绍了 Markdown 的基础语法和数学公式语法，本文主要介绍使用现在非常流行的 Vscode 代码编辑器进行 Markdown 书写的一些配置。

插件

这里主要推荐三款核心插件，其余的可以按需选择。

Markdown All in One 目前 Vscode 最流行的 Markdown 语法解析器。
Markdown PDF 使用的 Markdown 文件渲染导出插件。
Markdown TOC 一款针对 Github 等平台自动生成文章目录的插件（目前主流的博客平台如 CSDN 已经不需要自己在文中生成目录了）。

安装方式也很简单，在 Vscode 的左侧导航栏最后一个联网搜索 markdown 关键字，找到对应插件点击安装（下图 install）即可，上述几个插件都是高排名插件，最前面就能找到。步骤如下图。

Markdown All in One

就像插件的名字一样，将之前很多其他编辑器需要多插件配合的 Markdown 环境整合为一个，支持多种 Markdown 语法、实时预览、快捷键解析等功能。

安装之后打开以.md或者.markdown为后缀结尾的 Markdown 文件，就可以右侧窗口实时预览渲染效果，当然，也可以使用Ctrl+B这样的快捷键直接进行一些 Markdown 语法操作，这里就是自动补**content**语法标记。

具体的语法可以参考本文引言中的链接，安装后编辑器界面如下。

Markdown PDF

该插件可以实用地将 MArkdown 文件渲染的显示结果（基于 HTML）导出为 HTML、PDF、PDG、JPEG 等格式的文件，而不需要用户自己处理繁琐的图片路径等问题。

安装后在 Markdown 文件的编辑界面中右击即可显示菜单栏，在其中的如下几项就是该插件提供的，点击即可导出，这表示当前 Markdown 文件目录下生成对应 PDF，文件名相同，其他需要的可以自行对插件进行配置。

对当前教程导出后，某一页结果如下。

Markdown TOC

在一些平台如 Github 渲染 Markdown 文件是不能自动目录的，需要自己手写，而繁琐的 HTML 语法又不太方便，使用该插件即可快速生成自动目录。

使用方法很简单，在需要添加目录的地方右击菜单栏，可以看到如下几个 TOC 插件功能，前面两个是章节自动编号（用的不多），后面两个则是自动增加或者更新目录和删除目录。

该插件使用可能会有问题，其中比较常见的是目录格式异常，这是因为**该插件解析行尾是使用\n而 Vscode 的默认行尾标志是auto所以会生成异常如下。

这里解决方法很简单，通过修改 VScode 编辑器的默认行尾符号即可。编辑器左下角点击设置—进入 setting 配置—搜索 eol—修改文件行尾符号为\n即可。

这是，生成的目录格式正确且渲染正常，如下图。

这里还需要进行一些配置，主要针对一个需求:我并不需要对一级标题列入目录中，且想要手动进行目录编辑，但手动修改目录后插件会自动更新该区域。

这是因为插件默认配置目录是自动更新的，这里只需要对插件进行配置即可，具体操作如下：找到安装的插件—点击扩展配置—对打开的配置文件最后两个带auto的自动选项取消勾选。

此时就可以修改为自己需要的目录格式了，如下图。

补充说明

本文主要介绍如何使用 Vscode 进行 Markdown 编辑器的配置，由于本文发于 CSDN 就没有添加文章目录，欢迎点赞收藏本文。

Markdown-VScode打造Markdown编辑器相关推荐

用VSCode打造宇宙最强Markdown编辑器【VSCode篇】vscode+MPE插件+PigGo图床+最佳实践+使用技巧
在昨天,简单写了一下Markdown,并学习了CSDN的Markdown扩展语法,让我们离用Markdown写博客的目标更近了一步.今天开始打造Markdown编辑工具,以帮助我们更好的写博客.这篇全 ...
codemirror 光标定位_使用Codemirror打造Markdown编辑器
前几天突然想给自己的在线编译器加一个Markdown编辑功能,于是花了两三天敲敲打打初步实现了这个功能. 一个Markdown编辑器需要有如下常用功能:粗体斜体中划线标题链接图片引用代码 ...
用vscode写markdown的正确姿势
写markdown一直没找到特别顺手的工具,这两天试了试vscode,被惊艳到到了,特此记录一下. 1.安装vscode 之所以罗嗦一下安装,是因为安装版明显不如解压绿色版好用,特此标记一下! 2.安 ...
VSCode+Evernote+markdown
VSCode+Evernote+markdown 一.三款软件介绍二.安装配置步骤 1. 工具准备 2. vscode配置三.通过vscode 编写markdown 然后sync到evernote ...
教你实现Vscode的Markdown预览
vscode 的 markdown 预览是我们整天都在用的功能,有没有想过它是怎么实现的.或许有一天你会接到个定制 markdown 预览的需求,应该怎么做呢? vscode 的 markdown 预 ...
vscode markdown_使用vscode开始Markdown写作之旅
本文适用于以下对象-- 从没用过Markdown的打算开始用Markdown的日常使用Windows平台的 Markdown的介绍大家可以参考上一篇文章:本文的目的,则是引导大家开始Markdow ...
【MarkDown】：MarkDown编辑器
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法代码块高亮图片链接 ...
使用vscode删除markdown空行
使用vscode打开markdown. 使用查找替换的方式,查找输入^\s*$\n,使用正则. ^\s*$\n 若多个文件查找替换,使用左上角的放大镜,然后全部替换: 若某一个文件中查找替换,则使用& ...
【有效】vscode中markdown导出pdf报错解决： ERROR: Navigation Timeout Exceeded: 30000 ms exceeded
在vscode对markdown文档进行导出pdf时(使用的Markdown PDF1.4.4版本插件),vscode界面弹出报错: ERROR: Navigation Timeout Exceede ...

Markdown-VScode打造Markdown编辑器