vscode如何预览markdown_是时候来学一点Markdown了！我的Markdown上手笔记，希望能帮到你...

是时候学一点Markdown了&＃xff01;

　　这篇文章也是我通过Markdown完成的第一篇文章&＃xff0c;如果这篇文章里面出现任何显示问题&＃xff0c;那肯定是知乎跟MD格式不兼容的锅&＃xff01;

为什么要学习Markdown

　　其实很早之前就有学Markdown和LaTeX的想法。今年年初由于疫情&＃xff0c;不得不在电脑上完成作业&＃xff0c;起初是采用Surface Pen手写&＃xff0c;效果也还不错&＃xff0c;后来体验了Word自带的Unicode Math公式编辑器&＃xff0c;瞬间爱不释手&＃xff0c;这效率可比手写高多了&＃xff08;并且我也特别享受这样的创作过程&＃xff09;&＃xff0c;于是又进而萌生了学习Markdown和LaTeX的想法。一拖再拖到暑假&＃xff0c;来认认真真地学习一下吧&＃xff01;

　　Markdown有很多的优点&＃xff0c;以下是一些简单的介绍。

简洁明了&＃xff0c;专注内容的编辑体验

　　我们平时若想要写一些文字&＃xff0c;会采用什么软件呢&＃xff1f;利用记事本写txt纯文本文档的话&＃xff0c;虽然更为通用&＃xff0c;可以在几乎任何地方阅读&＃xff0c;但似乎可支持的内容太少&＃xff0c;不能插入代码块、图片、标题分级、文本的加粗、斜体、下划线等。采用Word来编写的话&＃xff0c;首先文件的外观就与平台有关&＃xff0c;有时候我们好不容易排好了版&＃xff0c;但是在其他版本的软件上瞬间变得一团糟。更严重的是&＃xff0c;排版本身就将作者大量的注意力里从文字当中吸引走&＃xff0c;而不能专注于写作本身&＃xff0c;Word的排版真是门技术活&＃xff0c;段前段后缩进、段落距离行距离等我就花了很长时间研究……

　　这样一来&＃xff0c;Markdown的优点就凸显出来。Markdown更专注于内容本身&＃xff0c;而文档的样式、版式则是由阅读器来决定的&＃xff08;所以使用Markdown进行写作可以很方便地换主题&＃xff09;。这样一来&＃xff0c;写作者可以更专注于自己正在撰写的文字&＃xff0c;也有更多的编辑器和阅读器选择自由度。Markdown也可以插入公式、图片、代码块、标题、序号等&＃xff0c;内容很丰富。个人认为&＃xff0c;但就写作体验而言&＃xff0c;Markdown应该是目前最佳的一种格式吧。

对其他平台的友好兼容

　　正如前述&＃xff0c;因为Markdown本身不包含版式等信息&＃xff0c;它也能够很好地兼容各个平台。CSDN、知乎、简书等博客性质的网站都可以支持导入.md文件转化为文章&＃xff0c;正是利用了Markdown的这一特性。其实这次我开始学习Markdown的直接诱因就是想在知乎上写一些文章&＃xff08;&＃xff1b;´д&＃xff40;&＃xff09;ゞ

Markdown的缺点

　　Markdown也有很多缺点&＃xff0c;首先就是Markdown需要记住一些独特的语法&＃xff0c;但是这也不算很难。其次&＃xff0c;Markdown插入图片是以链接的方式&＃xff0c;而非直接将图片存储在文件之中&＃xff0c;这就会导致迁移文件或者图片目录时可能引起图片显示的异常。虽然有一些方法解决这一问题&＃xff0c;但总的来讲的确不太方便。此外&＃xff0c;Markdown的公式编辑功能缺乏图形界面的辅助&＃xff0c;使用体验不如Word的公式编辑器。还有很多的小毛病&＃xff0c;比如段首缩进等&＃xff0c;对中文的适配等……

&＃xff08;但是&＃xff0c;许多功能可以通过软件的辅助来实现&＃xff09;

两款Markdown编辑器

　　开始Markdown写作其实只需要下载相应的软件就好了&＃xff0c;之所以说需要配置环境&＃xff0c;是因为使用Markdown在某些情况下需要很多插件&＃xff08;或者Markdown本身就是通过插件实现的&＃xff09;。Markdown的可选编辑器有很多&＃xff0c;不再赘述&＃xff0c;只提一下我自己用的两款。

Typora

Typora的优点

• UI很美观&＃xff0c;赏心悦目
• 支持多种显示主题&＃xff0c;如Dark Mode&＃xff0c;GitHub样式等&＃xff0c;在网上可以找到更多拓展
• 支持多个平台
• 操作简单&＃xff0c;不需要什么额外的配置
• 支持打字机模式、专注模式等&＃xff0c;提升写作体验
• 具有直观的GUI操作&＃xff0c;例如直接右键单击进行样式设定&＃xff0c;插入图片等功能
• 可以通过快捷键改变文字样式&＃xff0c;正如在Word中一样
• 支持字数统计等
• 总而言之就是更像是一个用来写作的工具了

Typora的缺点

• 可自定义性较差
• 不支持Markdown的format提醒
• 采用将源代码区与显示区合为一体的交互方式&＃xff0c;在我看来是一种劣势&＃xff0c;但是也许有的用户会喜欢吧

VSCode

　　VSCode原生支持Markdown文件的预览和语法高亮&＃xff0c;通过插件可以在VSCode中实现Markdown的更多功能&＃xff0c;能少安装一些软件&＃xff0c;何乐而不为呢&＃xff1f;

VSCode的优点

• VSCode的界面不用我说了&＃xff0c;漂亮的惊人&＃xff0c;主题样式也很多&＃xff0c;每次写代码都是享受
• 高度可自定义&＃xff0c;只需要编辑.json配置文件
• 支持语法高亮
• 通过插件可以大大增强功能&＃xff0c;支持对于Markdown格式标准化的提醒&＃xff0c;甚至可以进行自动修正等

VSCode的缺点

• 没有图形界面&＃xff08;指对于Markdown的编辑而言&＃xff09;&＃xff0c;大部分操作都需要通过原生的Markdown代码实现
• 需要配置环境&＃xff0c;还是有点复杂的&＃xff08;一开始我对.json不是很熟悉&＃xff0c;研究了很久才掌握&＃xff09;

　　总而言之&＃xff0c;VSCode更像是一款针对程序员的Markdown工具&＃xff0c;而Typora则适合没有那么强的计算机基础的小白&＃xff0c;它也适合利用Markdown进行纯粹的创作的人群。萝卜白菜各有所爱&＃xff0c;总之我是两个都装了。

在VSCode上编写Markdown

　　首先从微软的官网下载安装VSCode。

　　打开你所需要的文件夹&＃xff0c;新建Markdown文件。

　　打开这个文件&＃xff0c;就可以看到源代码的编写界面。通过快捷键Ctrl&＃43;Shift&＃96;&＃96;&＃96;&＃43;V&＃96;启动预览页面&＃xff0c;再把窗口拖拽到另一侧&＃xff0c;就成了我们熟悉的Markdown编写界面了。

VSCode中Markdown环境的简单配置

　　介绍几个小插件&＃xff0c;各有各自的功能。

markdownlint

　　正如其名字里带着的lint&＃xff0c;这款插件主要用于实现Markdown写作的格式规范化和自动更正&＃xff0c;具体可以访问markdownlint规则说明文档。

　　如果源代码中有与markdownlint的规则相抵触之处&＃xff0c;则会出现黄色波浪线&＃xff0c;将鼠标移至其上&＃xff0c;就可以在弹出的选项卡里转到对应规则的描述。有些规则是我们不太想要的&＃xff0c;或者需要做一些微调。以规则MD024为例&＃xff0c;这一规则要求不能出现内容相同的标题。但是实际使用中&＃xff0c;只要从属在不同的上一级标题之下&＃xff0c;似乎即使标题相同也不会引起什么误解。

　　在官方说明文档中我们看到&＃xff0c;这一规则对应的名称Aliases为no-duplicate-heading或者no-duplicate-header&＃xff0c;参数为siblings-only或者allow_different_nesting&＃xff0c;默认值都为false&＃xff0c;接下来进行修改。

　　使用快捷键F1或Ctrl&＃43;Shift&＃43;P打开VSCode主命令行&＃xff0c;直接搜索settings.json&＃xff0c;根据自己的需要打开全局或者工作区的配置文件。在配置文件中&＃xff0c;添加markdownlint的配置语句&＃xff1a;

Remark&＃xff1a;只需要更改一个参数就行&＃xff0c;注意语法&＃xff0c;尤其是那个逗号。

　　这样一来就可以实现允许相同内容的标题出现&＃xff0c;但仅在不同的上一级标题之下

　　此外markdownlint还支持更高级的规则自定义&＃xff0c;具体参阅GitHub上的markdownlint自定义规则说明文档

　　markdownlint提供的另一个功能是根据这些规则自动格式化文档。要启用同样是在settings.json文件中添加语句&＃xff1a;

Remark&＃xff1a;这一段代码相当于对VSCode主体的设置&＃xff0c;所以是写在settings.json文件的主体中&＃xff0c;而非前述"markdownlint.config"括号内。

　　完成这个修改之后&＃xff0c;每次保存文件都会自动格式化&＃xff0c;还挺方便的。这个格式化过程也是可以回退的。

Markdown Preview Enhanced

　　顾名思义&＃xff0c;这个插件就是用来增强VSCode中Markdown文件的预览体验的。VSCode默认的预览窗口是跟随VSCode全局的主题设置&＃xff0c;所以有时候可能暗色模式不太适合阅读文件。

　　安装Markdown Preview Enhanced插件&＃xff0c;在源代码窗口右键单击&＃xff0c;即可选择在右侧打开预览窗口。不仅可以实现阅读的增强&＃xff0c;以及目录的显示&＃xff0c;在预览窗口中右键单击还可导出Markdown文件为其他格式&＃xff0c;实在方便。

　　此外&＃xff0c;Markdown Preview Enhanced也具有额外的图片功能&＃xff01;在后文会提到。

Markdown All in One

　　正如名称所言&＃xff0c;这款插件集合了很多功能&＃xff0c;包括快捷键、公式、格式转换、目录和脚注等。具体的目前我都还没有摸得很清楚&＃xff0c;有待研究。

　　最为方便的功能就是快捷键&＃xff0c;下文中会提到关于文本样式的设定&＃xff0c;如加粗、斜体等&＃xff0c;在没有插件的情况下就必须通过标记符号来实现&＃xff0c;还是比较复杂&＃xff0c;而安装了Markdown All in One后便可以直接使用快捷键&＃xff0c;正如在Word中进行编辑一样。当然&＃xff0c;值得注意的是&＃xff0c;这会覆盖一些VSCode自身的快捷键。

vscode-pandoc

　　这款轻量插件实现了将Markdown文件转换为某些格式&＃xff0c;没有GUI&＃xff0c;通过命令行操作。

PicGo

　　大名鼎鼎的Markdown图片辅助工具&＃xff0c;VSCode有可用的插件&＃xff0c;基于PicGo Core实现&＃xff0c;所以没有GUI。我觉得为什么不直接用PicGo软件本体呢&＃xff1f;关于PicGo在“图片”一节中会提到更多。

Markdown的语法

　　用简明的方式整理一些基本的Markdown语言&＃xff0c;需要更详细的解读可以去参照官方文档或者其他的文章。

Remark&＃xff1a;大部分HTML语法可以直接在Markdown中使用&＃xff0c;但是markdownlint中的规则MD033要求不在Markdown中直接使用HTML语法&＃xff0c;而是使用“纯粹”的Markdown语言。如果对于黄色波浪线感到反感&＃xff0c;可以通过前述的类似方法设定允许使用的HTML语法元素。

文本

输入文本就代表文本

换行符只相当于空格&＃xff0c;段落是通过一个空行来标记

#标记各级标题&＃xff0c;井号的数量标记标题的等级

段首空格并不代表缩进&＃xff0c;但是四个空格会代表一个制表符&＃xff08;即Tab键&＃xff09;

使用单星号包围文字以表示斜体&＃xff0c;如*文字*显示为文字

Remark&＃xff1a;部分编辑器中斜体也可以用单下划线_包围来表示

使用双星号包围文字以表示加粗&＃xff0c;如**文字**显示为文字

使用三星号包围文字以表示加粗斜体&＃xff0c;如***文字***显示为文字

使用双波浪线包围文字以表示删除线&＃xff0c;如~~文字~~显示为文字

使用等号包围文字以实现高亮&＃xff0c;如&＃61;&＃61;文字&＃61;&＃61;显示为&＃61;&＃61;文字&＃61;&＃61;&＃xff08;知乎不支持高亮&＃xff09;

使用HTML中的语法来实现下划线&＃xff0c;如文字显示为文字

使用^包围来表示上标&＃xff0c;如e^x^显示为e^x^

使用~包围来表示上标&＃xff0c;如a~n~显示为a~n~

&＃xff08;知乎不支持上下标&＃xff09;

其他的样式可以通过数学公式来实现&＃xff0c;例如$overline{文字}$显示为&＃xff08;知乎又……&＃xff09;

Markdown支持输入HTML转义字符

代码块

　　段首使用四个空格或者一个制表符即进入代码块模式

　　也可以在段落前与段落后各加上三个反引号&＃xff08;即键盘左上角的波浪线&＃xff09;&＃96;&＃96;&＃96; 以开启代码块。在第一串三反引号之后加上代码的类型&＃xff0c;即可实现语法高亮。

　　例&＃xff1a;

Remark&＃xff1a;以上代码块中最后的是为了不让Markdown将其前面的&＃96;&＃96;&＃96; 识别为代码块的结束&＃xff0c;没有别的含义

　　其显示效果即为前文提到的配置settings.json文件时所引用的代码块样式

Remark&＃xff1a;正确的转义反引号&＃96; 的方法并非使用反斜杠&＃xff0c;而是使用双反引号及空格将反引号围起来&＃xff0c;即
&＃96;&＃96; &＃96; &＃96;&＃96;
这将显示为一个代码块内的单反引号

　　行内代码块&＃xff0c;既可以通过三反引号前后包围&＃xff0c;也可以通过单反引号前后包围。

链接

不显示为特定文字的链接&＃xff1a;将显示为https://www.bilibili.com

显示为特定文字的链接&＃xff1a;[Bilibili](https://www.bilibili.com)将显示为Bilibili

图片

　　与显示为特定文字的链接相似&＃xff0c;只是在之前加上一个叹号!&＃xff0c;其后更改为图片的地址。既可以是网络地址&＃xff0c;也可以是计算机上的绝对路径&＃xff0c;也可以是相对于.md文件的相对路径。

　　插入图片是Markdown的一大揪心之处&＃xff0c;一般通过“图床”来实现。

公式

　　Markdown中的数学输入和LaTeX其实很像

　　偷懒放个别的文章&＃xff1a;Markdown 公式指导手册

　　&＃xff08;视编写环境而定&＃xff0c;可能语法和功能上有些出入&＃xff09;

　　简要提一下我从Unicode Math转到LaTeX的心得&＃xff1a;大部分地方还是相同的&＃xff0c;只是要更加注意用{}来对不同的元素进行组合&＃xff0c;公式要有首尾的标记&＃xff0c;以及不能够再直接/然后敲空格来输入分数了……

分割线

　　在一行输入三个及以上的*或-都可以起到分割的作用&＃xff0c;哪怕它们之间有空格。

表格

将显示为

　　通过|来划分每一列&＃xff0c;而构成表格的要素则是第二行的一串符号&＃xff08;这一行代码是必须的&＃xff09;。其实很直观很好理解&＃xff0c;:-:代表居中&＃xff0c;:-代表左对齐&＃xff0c;-:代表右对齐&＃xff0c;从这个示例表格的样式里也可以观察出来。

列表

使用-开启无序列表&＃xff0c;注意必须要有这个空格
使用1.&＃xff0c;即数字加英文句点和空格来开启有序列表&＃xff0c;空格也是必须的

怎样存图片

　　这个问题相当复杂&＃xff0c;也很重要&＃xff0c;关于图床的话题单独写一篇文章吧。&＃xff08;希望我能尽快填坑&＃xff09;

Remark&＃xff1a;“图床”的英文并非是”Figure Bed”&＃xff0c;也跟”bed”没有关系
Remark&＃xff1a;此前提到的Markdown Preview Enhanced插件支持imgur&＃xff0c;SM.MS&＃xff0c;七牛这几款图床

其他参考文档

　　这些文档都很有价值&＃xff0c;可以一看&＃xff08;每次上网搜文档都极其感激博主们&＃xff09;

• 在Markdown语言中&＃xff0c;如何实现段首空格的显示&＃xff1f;
• PicGo&＃43;GitHub图床&＃xff0c;让Markdown飞
• Markdown 语法说明 (简体中文版)
• 我的 gitee 图床&＃xff0c;自动上传、压缩、获取图片 url&＃xff08;真的很羡慕&＃xff0c;我试了&＃xff0c;没成功&＃xff0c;还是再多多学习下吧&＃xff09;
• Gitee图床&＃43;PicGo&＃43;Typora便捷在博客中使用图片
• Cmd Markdown 公式指导手册
• markdown中公式编辑教程