当前位置: 首页 > Web前端 > HTML

有时候我觉得我不知道怎么markdown

时间:2023-03-28 13:18:58 HTML

前言在《一篇带你用 VuePress + Github Pages 搭建博客》我们使用VuePress搭建了一个博客,最终效果查看:TypeScript中文文档。在优化博客的过程中,因为需要写markdown-it插件,查看了markdown的CommonMarkSpec,突然发现自己对Markdown的了解还不够:软换行符(Softlinebreaks)换行符不在内联代码或HTML标记中。如果没有两个或更多的空格,它将被解析为软换行符。呈现为HTML时的行终止符或空格。输入:foobaz输出:

foobaz

性能:硬换行符(Hardlinebreaks)换行符不是内联代码或HTML标签,前面有两个或多个空格,并且不在块的末尾,将解析为硬换行符并呈现为HTML中的
标记。输入(注意foo后面有两个空格):foobaz输出:

foobaz

性能:反斜杠(backslash)除转义外相当于行尾的硬换行符:input:foo\barOutput:

foobar

Inlinecode(codespan)我们通常用一对反引号将字符串包裹起来,表示inlinecode(codespan):Input:`foo`Output:

foo

性能:但是其实现中的代码只要求内联代码以一串反引号开头,以一串等长的反引号结尾。所以也可以使用多个反引号:```foo```Output:

foo

围栏代码块(Fencedcodeblocks)如果你至少使用三个连续的反引号和换行符被添加以形成一个围栏代码块:```foo```输出:
foo
性能:作为内联代码,而不是需要三个反引号,因为只要前后至少有3个且相同,那么当我们想在一个代码块中使用3个反引号时,可以使用4个反引号:``````markdownfoo```````性能是:不要使用反引号,使用波浪号也是可以的,但是不能混用:~~~foo~~~output:
foo
indentationIndentedcodeblocks(缩进代码块)缩进代码块由若干个用空行分隔的缩进块组成。缩进块是一些非空行,每行缩进四个或更多空格。缩进块示例:一个简单的缩进代码块输出:
一个简单的缩进代码块
性能:由空行分隔的多个缩进块示例:chunk1chunk2chunk3输出:
chunk1chunk2chunk3
三个缩进块一起组成一个缩进代码块。性能:链接引用定义(Linkreferencedefinitions)链接引用定义由一个链接标签、一个冒号(:)、可选的空格、一个链接目标、可选的空格和一个可选的链接标题组成。例如:[foo]:/url"title"但这只是一个定义,不会显示,就像我们在JavaScript中声明一个变量,如果我们要使用它:[foo]输出:

foo

链接引用定义不对应结构元素。它实际上定义了一个标签,用于文档中其他地方的引用链接和引用类型的图像。它可以出现在参考链接之前或之后。在图像中使用链接引用定义时:![foo][bar][bar]:/url输出:

autolink(Autolinks)自动链接是用尖括号(<...>)括起来的绝对URI和电子邮件地址。它将被解析为链接,并以URL或电子邮件地址作为链接标签。相当于:[http://foo.bar.baz](http://foo.bar.baz)输出为:

http://foo.bar.baz

Setext标题(Setextheadings)Setext是一种用于格式化纯文本文档的轻量级标记语言,示例包括电子通讯,Usenet帖子和电子邮件。与其他一些标记语言相比,标记易于阅读,无需任何解析或特殊软件。Markdown也提供了类似的语法:Foo*bar*=========Foo*bar*--------Output:

Foobar

Foobar

使用=是一级标题,使用-字符是二级标题。底线的长度是任意的。水平线(Thematicbreaks)缩进0-3个空格,由三个或更多-、_、*字符组成的线组成一条水平线。输入:***---____输出:


性能:系列文章博客搭建系列是我目前为止唯一写的实用系列教程,期待约20篇文章,讲解如何使用VuePress搭建和优化博客,并部署到GitHub、Gitee、私服等平台。本文为第19篇,全系列文章地址:https://github.com/mqyqingfen...微信:“mqyqingfeng”,加我到SaeYu的唯一读者群。如有错误或不准确的地方,请务必指正,万分感谢。如果你喜欢或者有启发,欢迎star,这也是对作者的鼓励。