前端 · 2022年8月1日

如何在VSCode上写Mark Down

作者:不喝水就犯困
链接:https://www.zhihu.com/question/20849824/answer/2298603117
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

如何在VSCode上写Mark Down

近几年Markdown这种轻量级的文本编辑非常火,虽然不能代替我们现在依旧在使用的word,但是许多创作平台已经把Markdown的文件格式纳入平台,这意味着以后写博客写公众号什么的就可以直接在Markdown上完成写作,然后再在第三方平台转到创作平台上,比如简书,CSDN,公众号、知乎,这些都可以使用Markdown的语法。

知道Markdown这么强大以后,我就开始着手在Markdown上写了一些东西,使用起来也很舒服。下面就分享如何在VSCode上使用Markdown。

我之前一段时间一直使用的Markdown软件是typora,前不久官网刚通知收费,这是多么的遗憾啊,那作为白嫖党,我就去搜了一下其他的Markdown写作软件,试了好多,比如 MacdownMarxicoAtomMWeb,等等等等,最后对比了一下,还是选择了VSCode,不为别的,就是喜欢,现在许多软件在VSCode上提供了插件,VSCode也成为我电脑上必不可少的写作软件。

在VSCode上写Markdown 文件,真的太简单了,只需要一个插件【Markdown All in one】 ,安装完毕直接可以使用。

前提是你要装好VSCode,并且适配好中文语言环境。

接下来就说一下在书写Markdown时常用的一些语法,语法也是非常简单,一些就会,网上有很多超级长的教程,根本不需要,看一篇文章就能学会。我来列举一下我在写Markdown时经常使用的语法。

文本的写法

普通段落文本

普通段落和用word书写无异,直接书写即可。如:

奥林匹克运动会,是

国际奥林匹克委员会

主办的世界规模最大的综合性运动会,每四年一届,会期不超过16日,是世界上影响力最大的体育盛会。

在文章中一个段落中可以有多个句子,句子用句号,问号,惊叹号等结束,而一个段落的结束用回车。

斜体、粗体、删除线

在文章中突出要点词语,句子可以用倾斜,加粗等方式展现,word中要选中文本,然后赋予样式,而markdown只要在文本的前后加上*号就可以了。

前后各加一个*号,文字将倾斜:

*斜体*的最终效果是斜体

前后各加两个*号,文字将加粗:

**粗体**的最终效果是粗体

前后各加两个~号,文字中将出现删除线,这是一种反向强调,表示“不应该”,“不正确”等等意思:

~~删除~~的最终效果是~~删除~~

下表列出所有特殊符号对应的效果

| 语法 | 效果 | | :———————— | :———————- | | *斜体1* | 斜体1 | | _斜体2_ | 斜体2 | | **粗体1** | 粗体1 | | __粗体2__ | 粗体2 | | ~~删除线~~ | ~~删除线~~ | | ***斜粗体1*** | 斜粗体1 | | ___斜粗体2___ | 斜粗体2 | | ***~~斜粗体删除线1~~*** | ~~斜粗体删除线1~~ | | ~~***斜粗体删除线2***~~ | 斜粗体删除线2 |

斜体、粗体、删除线可混合使用。 上述的*_~这些符号都是英文符号,在中文环境下使用较少,所以用来标明特殊格式不会有问题,如果要使用上述符号,请在前面一个\,比如\*最终效果是*

用这种前后加符号的方式来标注特殊格式好处是更加快捷,修改方便,而且是可读文本,在markdown编辑器中这些符号会转换为格式,而普通的文本编辑器看到的是符号,不会影响阅读内容。

红字文本

红字文本是比倾斜,加粗更加醒目的突出样式,word中通常是选中文本,然后点击字体颜色。markdown中则是在要标红的文本前后各加一个“`符号,方法和前面介绍的倾斜,加粗一样:

红字的最终效果是红字

红字也可以和斜体,粗体,删除线混合使用。如*倾斜红字*的最终效果是倾斜红字。 markdown设置不同的字体颜色只有``一个符号,默认就是红色,但是可以用css`设置为其它颜色,如蓝色,绿色,但只有一种异色效果。

标题

markdown中在一个普通段落前加#,将其设置为标题。一个#就是一级标题,两个#就是二级标题,一共可以有六级标题。

| 语法 | 效果 | | :—————- | :——- | | # 一级标题 | 一级标题 | | ## 二级标题 | 二级标题 | | ### 三级标题 | 三级标题 | | #### 四级标题 | 四级标题 | | ##### 五级标题 | 五级标题 | | ###### 六级标题 | 六级标题 |

作为最常见的一级标题和二级标题,还可以用另一种写法,一级标题下面加上三个(或更多)连续的=号,二级标题下面加上三个(或更多)连续的-号:

| 语法 | 效果 | | :————— | :——- | | 一级标题 === | 一级标题 | | 二级标题 --- | 二级标题 |

注意和前面介绍的文本格式不同,标题不需要在首尾各加一个特殊符号,只要在首部加#就可以了,而且必须是在行首。 标题和普通文本一样,里面的文本也可以用红字,斜体,粗体,删除线。但是一般标题的样式都是粗体,再用粗体肉眼分辨不出来。

图片的写法

可用下面的格式在文章中插入图片:

![图片名](图片文件路径)

其中图片名可以省略。图片文件路径可以是绝对路径,如C:\Windows\Greenstone.bmp。如果图片和文章在同一个目录下,也可以只有文件名。例如:

![田径](田径.jpg)

像迷你档这样的markdown编辑器可以直接把图片文件拖到文章中,也可以粘贴图片文件,图片数据。如果粘贴的是图片数据,会自动在编辑器的管理目录中创建一个图片文件保存数据,并用上面的图片格式插入到文章中。

链接的写法

可用下面的格式在文章中插入链接:

[链接名](URL或者文件路径)

例如[Google](https://www.google.com),此时点击Google会跳转到Google的官网。

和前面的图片写法比较,可以看出什么不同?答案是链接没有前面的惊叹号。 链接也可以和红字,斜体,粗体,删除线等混合使用,也可以用在标题中。

链接本地文件

除了可以链接网址外,还可以链接本地文件,例如[绿石](C:\Windows\Greenstone.bmp),要注意前面加惊叹号和不加惊叹号的区别,加了惊叹号会把它当图片处理,如果是本软件支持的图片格式,会在文章中显示它;不加惊叹号会把它当链接处理,点击它会打开文件位置。文件路径可以是绝对路径,也可以是文章的相对路径。

链接其它文章

通过链接其它文章,可以实现在文章间的跳转。例如文章A中一个话题在文章B中有更详细的展开讨论,可以在文章A中使用一个跳转到文章B的链接,和前面的链接本地文件一样的格式,例如:[什么是markdown](what_is_markdown.html)

段落锚点

通过在链接文章后面加上#段落名,可以实现跳转到文章的指定段落。段落名是此段落的标题,可以是一级标题,二级标题,直至六级标题。

如果要跳转到本文内的锚点,可以省略文章名,例如[跳转到本文关于标题的介绍](#标题)

段落锚点可以是任意一级标题,如果文章中有两个同名标题,那么只能设置前一个为锚点,点击后只会跳转到前一个段落上。

下面将介绍列表,表格,代码段,引用段的写法。

分隔线的写法

分隔线是网文中用得很多的一种元素,可以表达的意思有文章补充,参考来源,签名等,在word中,可以在空行输入三个-,或者三个=,或者三个~等等,再按回车插入分隔线。markdown也是一样,只要在一行内打出三个或以上的*-_就可以在文章中画一条横线:

| 语法 | 效果 | | :—- | :— | | *** | | | --- | | | ___ | |

Word中的分隔线根据不同的符号,可以是直线型,双直线型,波浪线型等等,markdown中只有一种,但是可以用css设置线型。

引用段的写法

引用名人名言,或者其他人在其它文章中的话语,一般将其放在一个引用段中。word在样式选择时可以选择引用类型,而markdown创建引用段也很方便,只要在段首以一个<+空格开头就可以了。

| 语法 | 效果 | | :———————————————————– | :———————————————————– | | <奥林匹克运动会发源于两千多年前的古希腊,因举办地在奥林匹亚而得名。古代奥林匹克运动会停办了1500年之后,法国人顾拜旦于19世纪末提出举办现代奥林匹克运动会的倡议。1894年成立奥委会,1896年举办了首届奥运会,1924年举办了首届冬奥会,1960年举办了首届残奥会,2010年举办了首届青奥会,2012年举办了首届青冬奥会。 | 奥林匹克运动会发源于两千多年前的古希腊,因举办地在奥林匹亚而得名。古代奥林匹克运动会停办了1500年之后,法国人顾拜旦于19世纪末提出举办现代奥林匹克运动会的倡议。1894年成立奥委会,1896年举办了首届奥运会,1924年举办了首届冬奥会,1960年举办了首届残奥会,2010年举办了首届青奥会,2012年举办了首届青冬奥会。 |

引用段也是文本段落,上一篇介绍的各种文本格式,图片,链接等等同样可以用在引用段内,而且可以用css设置不同的显示样式。

列表的写法

如果多个段落有并列关系,可以用列表的形式呈现,显得更加整洁。在markdown中,连续的每个段落在段首以一个*+空格开头就形成了一个列表。

| 语法 | 效果 | | :———————————————————– | :———————————————————– | | *田径:田径是体育运动中最古老的运动。 *赛艇:运动员背向前进方向划水的一项划船运动。 *自行车:起源于欧洲。1896年列为首届奥运会比赛。 | 田径:田径是体育运动中最古老的运动。赛艇:运动员背向前进方向划水的一项划船运动。自行车:起源于欧洲。1896年列为首届奥运会比赛。 |

如果多个段落有并列关系,而且逻辑上有顺序关系,可以用有序列表的形式呈现。和word一样,连续的每个段落在在段首以数字+.+空格开头就形成了一个有序列表。

| 语法 | 效果 | | :———————————————————– | :——————————————- | | 1.田径:47枚金牌 2.游泳:44枚金牌 3.自行车:18枚金牌 | 田径:47枚金牌游泳:44枚金牌自行车:18枚金牌 |

和word一样,段首的数字不需要是连续的,比如三个段落分别以1.1.1.开头,或者分别以1.3.5.开头,最终得到的效果都是1.2.3.的序号,markdown会自动计算列表序号。

如果列表中的某一项可以继续展开,还可以嵌入其它列表,也就是多级列表。在上面两种段首前加上三个空格就可以了,word很类似。

| 语法 | 效果 | | :———————————————————– | :———————————————————– | | 1. 田径:47枚金牌2. 游泳:44枚金牌 1. 泳道游泳:34枚金牌 2. 跳水:8枚金牌 3. 花样游泳:2枚金牌3. 自行车:18枚金牌 1. 山地:2枚金牌 2. 公路:4枚金牌 3. 场地:10枚金牌 4. BMX小轮车:2枚金牌 | 田径:47枚金牌游泳:44枚金牌泳道游泳:34枚金牌跳水:8枚金牌花样游泳:2枚金牌自行车:18枚金牌山地:2枚金牌公路:4枚金牌场地:10枚金牌BMX小轮车:2枚金牌 |

列表段也是文本段落,上一篇介绍的各种文本格式,图片,链接等等同样可以用在列表段内,而且可以用css设置不同的显示样式。

表格的写法

markdown中并不直接支持很复杂的表格,通常就是m行n列的普通表格,可以有表头,也就是(m数据行+1表头行)n列。做法也和word中大相径庭,是通过|字符和-字符“画”表格。比如下面的字符表格:

|届数  |赛事名称       |举办国家|主办城市|举办时间              |
|------|----------------|---|---|---------------------|
|第01届|1896年雅典奥运会|希腊|雅典|1896年04月06日-1896年04月15日|
|第02届|1900年巴黎奥运会|法国|巴黎|1900年05月20日-1900年10月28日|
|第03届|1904年圣路易斯奥运会|美国|圣路易斯|1904年07月01日-1904年11月23日|
|第04届|1908年伦敦奥运会|英国|英国|1908年04月27日-1908年10月31日|

就会创建如下表格:

| 届数 | 赛事名称 | 举办国家 | 主办城市 | 举办时间 | | :—– | :——————- | :——- | :——- | :—————————- | | 第01届 | 1896年雅典奥运会 | 希腊 | 雅典 | 1896年04月06日-1896年04月15日 | | 第02届 | 1900年巴黎奥运会 | 法国 | 巴黎 | 1900年05月20日-1900年10月28日 | | 第03届 | 1904年圣路易斯奥运会 | 美国 | 圣路易斯 | 1904年07月01日-1904年11月23日 | | 第04届 | 1908年伦敦奥运会 | 英国 | 英国 | 1908年04月27日-1908年10月31日 |

|字符和-字符分别表示表格的竖边和横边,其中横边只要第一行以下有就可以了,第一行就是表头。而且并不需要工整地对齐,只要记得一个竖线分隔一个单元格就可以了。

表格内对齐在第二行,也就是纯|字符和-字符组成的表头/表数据分隔行内控制,如果一个单元格是以:开头并且以:结尾,那么此列是居中,仅以:开头是左对齐,仅以:结尾是右对齐,例如:

| 左对齐 | 居中  | 右对齐 |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
| col 2 is      | centered        |   $12 |
| zebra stripes | are neat        |    $1 |

就会创建如下表格:

| 左对齐 | 居中 | 右对齐 | | :———— | :————– | :—– | | col 3 is | some wordy text | $1600 | | col 2 is | centered | $12 | | zebra stripes | are neat | $1 |

如果某个单元格没有设置对齐方式,也就是没有:字符,那么此列是默认对齐方式,由css设置,通常是左对齐。

最后说一说另一种常见的表格,没有表头,全部由数据组成,也就是无头表格。无头表格就是第一行的单元格内不能有空格以外的字符,比如上面的表格只要删掉“左对齐”,“居中”,“右对齐”:

|  |   |  |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
| col 2 is      | centered        |   $12 |
| zebra stripes | are neat        |    $1 |

就会创建如下表格:

| col 3 is | some wordy text | $1600 | | ————- | ————— | —– | | col 2 is | centered | $12 | | zebra stripes | are neat | $1 |

表头单元和数据单元内都可以用上一篇介绍的各种文本格式,图片,链接,而且可以用css设置不同的显示样式。

代码段的写法

程序员写技术文章通常要在里面插入一段一段的代码,代码段在word内没有直接的处理方式,而在markdown中则非常方便,由两个由三个“`字符(反引号,键盘上Esc健以下,数字1左边的键)组成的行包起来的部分就是程序代码,如:

| 语法 | 效果 | | :———————————————————– | :———————————————————– | | int main(int argc, char *argv[]) { printf("Hello, world!\n"); } | int main(int argc, char *argv[]) { printf("Hello, world!\n"); } |

通常markdown编辑器还会允许设置代码段的语法,例如常见的C++JavaPython等等,迷你档可以设置三十余种语法,设置了语法后就可以显示代码内的语法信息:

| 语法 | 效果 | | :———————————————————– | :———————————————————– | | ```c++ int main(int argc, char argv[]) { printf(“Hello, world!\n”); } ```` |int main(int argc, char argv[]){ printf(“Hello, world!\n”);}` |

代码段内不能使用一篇介绍的各种文本格式,图片,链接,所有的文本都是直接文本。

markdown的全部基本写法都介绍完了,今后还会介绍更多的扩展写法。

以上就是我在写公众号和知乎上,经常使用的Markdown语法,真的非常好用,推荐给所有人使用,我们可以把Markdown当作一种文本编辑器来用,在电脑上记一些程序呀,或者写论文时的一些想法呀,都是非常可以的。随着一些Markdown写作软件的收费,我相信之后VSCode会更加受欢迎。