码迷,mamicode.com
首页 > 其他好文 > 详细

Markdown温故知新(2):详解七大标准语法

时间:2019-06-10 09:16:35      阅读:106      评论:0      收藏:0      [点我收藏+]

标签:http   分割线   方便   处理   法规   列表   代码块   嵌套   百度一下   

说明:在 Markdown 中,一行是指由换行符或回车符之外的字符构成的行,而不包含字符的行或仅包含空格或制表符的行则称之为空行。

1、标题

每篇文章都需要标题,不同的层级需要不同大小的标题。要在 Markdown 中实现这种分级标题的效果,只需要在标题前加上井号和空格即可,井号越多,标题越小,最多 6 个井号。具体规则如下:

  • 在文本前加 1 个#和 1 个空格,文本就会变成一级标题(对应 HTML 中的 H1)
  • 在文本前加 2 个#和 1 个空格,文本就会变成二级标题(对应 HTML 中的 H2)
  • 在文本前加 3 个#和 1 个空格,文本就会变成三级标题(对应 HTML 中的 H3)
  • 在文本前加 4 个#和 1 个空格,文本就会变成四级标题(对应 HTML 中的 H4)
  • 在文本前加 5 个#和 1 个空格,文本就会变成五级标题(对应 HTML 中的 H5)
  • 在文本前加 6 个#和 1 个空格,文本就会变成六级标题(对应 HTML 中的 H6)

一般来说,四级标题就足够用了,所以有些 Markdown 的样式默认只对前 4 级标题做区分。

示例一下,输入文本如下:

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

显示效果如下:

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

另外,一级标题还可以在标题的下一行用等号来标识,二级标题还可以在标题的下一行用减号来标识。需要注意的是,这种语法在不同平台会有差异,有些平台只需要一个等号或减号就行,也有些平台至少需要两个,还有些平台则至少需要三个。

换句话说,你至少需要写三个等号或减号才能确保在多数平台上都有效果。当等号或减号的数量达到三个之后,再多写就不会有额外效果了,所以有些人会疯狂的写上很多个等号或减号,其实没必要。

示例一下,输入文本如下:

一级标题
===
二级标题
---

显示效果如下:
一级标题
===
二级标题
---

2、强调(粗体 & 斜体)

如果不写任何标记符号,那 Markdown 编辑器对你来说就约等于记事本,可能唯一不同的地方就是无论你在 Markdown 编辑器中输入多少个空格,最终只会呈现一个。

Markdown 默认只支持粗体和斜体,大多数时候这已经足够了。只需要在文本前后都加上星号,星号中的文本就会自动变粗或倾斜。具体规则如下:

  • 1、在文本前后各加 1 个*,文本就会变成斜体
  • 2、在文本前后各加 2 个*,文本就会变成粗体
  • 3、在文前前后各加 3 个*,文本就会变成粗斜体

另外,也可以用下划线来代替星号,效果是一样的。

示例一下,输入文本如下:

科技*改变*生活,代码_改变_世界
科技**改变**生活,代码__改变__世界
科技***改变***生活,代码___改变___世界

显示效果如下:
科技改变生活,代码_改变_世界
科技改变生活,代码__改变世界
科技改变生活,代码
_改变___世界

注意:强调效果可以嵌套到列表行和引用段落中,但不能应用到标题或代码块中。我的理解是因为标题和代码块本身就有强调的意味。

3、列表

Markdown 中的列表有两种,有序列表和无需列表。有序列表的每一行用一个数字、一个英文句点及一个空格来标识,无序列表的每一行用一个减号和一个空格来标识。

有序列表,示例一下,输入文本如下:

1. 长江
2. 珠江
2. 黄河

显示效果如下(你有没有发现黄河前面的 2 被自动纠正为 3 了?):

  1. 长江
  2. 珠江
  3. 黄河

无序列表,示例一下,输入文本如下:

- 重复言说多半是时间上的损失。
- 教育的目的在于使人能够继续教育自己。
- 怕什么真理无穷,进一寸有一寸的欢喜。

显示效果如下:

  • 重复言说多半是时间上的损失。
  • 教育的目的在于使人能够继续教育自己。
  • 怕什么真理无穷,进一寸有一寸的欢喜。

其实,无序列表除了可以用减号来标识之外,还可以用加号或星号来标识。比如上例中的-就可以换成+*,效果完全一样,甚至可以混用这 3 种符号。

列表嵌套,示例一下,输入文本如下:

- 1、第一章
    - 1.1、第一节
    - 1.2、第二节
        1. 人不仅有好奇心,还有求知欲
        2. 追问事物的原理,是为了控制和利用
        3. 人发明了巫术,又从中分离出了科学
- 2、第二章
    - 2.1、第一节
    - 2.2、第二节
- 3、第三章

显示效果如下:

  • 1、第一章
    • 1.1、第一节
    • 1.2、第二节
      1. 人不仅有好奇心,还有求知欲
      2. 追问事物的原理,是为了控制和利用
      3. 人发明了巫术,又从中分离出了科学
  • 2、第二章
    • 2.1、第一节
    • 2.2、第二节
  • 3、第三章

引用列表,并且在列表中使用标题、粗体和斜体,示例一下,输入文本如下:

> ## 五大联合国常任理事国
- **中华人民共和国**
- *美利坚合众国*
- 俄罗斯联邦
- 大不列颠及北爱尔兰联合王国
- 法兰西共和国

显示效果如下:

五大联合国常任理事国

  • 中华人民共和国
  • 美利坚合众国
  • 俄罗斯联邦
  • 大不列颠及北爱尔兰联合王国
  • 法兰西共和国

列表中还可以包含代码块,需要在代码块的前面加上 8 个空格或 2 个制表符。

4、链接 & 图片

文本链接的写法是用一对中括号包裹链接文本,紧接着用一对小括号包裹链接地址,即[链接文本](链接地址)。另外,还可以给链接加 title,用双引号或单引号包裹并放在链接地址后面,即[链接文本](链接地址 "title文本")

示例一下,输入文本如下:

[万能的淘宝](https://www.taobao.com/)
[百度一下](https://www.baidu.com/ "你就知道")

显示效果如下:
万能的淘宝
百度一下

图片链接的写法只需要在文本链接的前面加上一个感叹号即可。当然链接地址得是图片地址,链接文本可写可不写,因为不会显示出来,而且不写也不影响图片的显示。

示例一下,输入文本如下:

![博客园Logo](http://image.mamicode.com/info/201906/20190610091635195954.gif)
![百度Logo](https://www.baidu.com/img/baidu_jgylogo3.gif "百度一下,你就知道")

显示效果如下:
技术图片
技术图片

如果你在本地写作,也想看图片链接的效果,那么你需要把图片拷贝到 Markdown 文件所在的目录中,假如这个图片名称是kid.jpg,那么写法就是![](kid.jpg)。或者拷贝到所在目录的子目录中也行,加入子目录名称是imgs,那么写法就是![](imgs/kid.jpg)

引用链接
在实际应用中,链接地址往往是比较长的,而且有时候还需要文章中多次引用某个链接,这时候可以在 Markdown 文件末尾定义一下该链接,并设置一个简短的链接文本,然后就可以在上文中通过链接文本来引用该链接了。

示例一下,输入文本如下:

部分中文搜索用[百度][bd]效果更好,多数英文搜索用[谷歌][gg]效果更好,技术搜索[谷歌][gg]的效果往往要比[百度][bd]的效果好很多。
然而遗憾的是,在中国访问[谷歌][gg]需要FQ。
[bd]: https://www.baidu.com/ "百度一下,你就知道"
[gg]: https://www.google.com/ "墙外更精彩"

显示效果如下:
部分中文搜索用[百度][bd]效果更好,多数英文搜索用[谷歌][gg]效果更好,技术搜索[谷歌][gg]的效果往往要比[百度][bd]的效果好很多。
然而遗憾的是,在中国访问[谷歌][gg]需要FQ。
[bd]: https://www.baidu.com/ "百度一下,你就知道"
[gg]: https://www.google.com/ "墙外更精彩"

上面示例的是如何引用文本链接,引用图片链接的方式与引用文本链接的方式完全相同。

自动链接指的是当你输入一个 url 或邮箱地址等链接时,Markdown 会自动将其转换为可访问的链接,写法是将链接地址置于一对尖括号之中。

示例一下,输入文本如下:

<https://www.cnblogs.com/>
https://www.cnblogs.com/ 效果对比行
<luck@qq.com>
luck@qq.com 效果对比行

显示效果如下:
https://www.cnblogs.com/
https://www.cnblogs.com/ 效果对比行
luck@qq.com
luck@qq.com 效果对比行

可能你会发现,在你使用的编辑器中写不写尖括号效果都一样,那是因为你使用的编辑器自带了链接识别功能。在很多博客或网络笔记中,要想链接显示成链接的效果,还是得加尖括号。

5、代码块

在 Markdown 的所有语法中,代码快大概是最能打动程序员的。尽管在程序员之外的人看来,代码快的效果不过是给文本加了个框,但写过文档的程序员都知道 Word 等文字处理软件中代码的显示效果和编辑效果有多糟糕。

代码块有两种:一种是行内代码块,用两个反单引号(也称重音符)包裹一下即可;另一种是多行代码快,在每行代码前加四个空格或一个制表符(Tab)的缩进,然后与上一行文本之间保留一个空行即可。

行内代码块,示例一下,输入文本如下:

JavaScript 在控制台输出消息的语法是 `console.log(message)`。

显示效果如下:
JavaScript 在控制台输出消息的语法是 console.log(message)

多行代码快,示例一下,输入文本如下:

    class Program {
        static void Main(string[] args) {
            Console.WriteLine("Hello World!");
        }
    }

显示效果如下:

class Program {
    static void Main(string[] args) {
        Console.WriteLine("Hello World!");
    }
}

有些工具或平台支持很多语言的代码高亮,现实效果非常好。常见标准中都没有规定这一块,所以如果你想要代码高亮,就得按你所用工具的语法规则来写了。

关于多行代码快,CommonMark 标准中定义了一个相对来说更加方便书写的语法,就是以三个独占一行的反单引号开头,并且以三个独占一行反单引号结尾。这样就不用写缩进了,而且代码块与上一行之间也不必再保留一个空行了。而且常见的各种工具基本都支持,似乎已经成为事实上的标准了。

示例一下,输入文本如下:
class Program { static void Main(string[] args) { Console.WriteLine("Hello World!"); } }
显示效果如下:

class Program {
    static void Main(string[] args) {
        Console.WriteLine("Hello World!");
    }
}

6、引用

如果需要在文中引入一段有出处的话,就可以采用引用的方式实现。实现的方式是在这段话的开头或上一行加上一个尖括号和一个空格。虽然 Markdown 的引用语法很简洁,但用法却很灵活,几乎可以和任何语法连用,而且很强大,能够逐级嵌套引用。

普通引用,示例一下,输入文本如下:

> 普通文本 **加粗文本** *斜体文本*
> ## 二级标题
> #### 四级标题

显示效果如下:

普通文本 加粗文本 斜体文本

二级标题

四级标题

嵌套引用,示例一下,输入文本如下:

> 一层引用
>> 两层引用
>>> 三层引用
>>>> 四层引用
>>>>> 五层引用

显示效果如下:

一层引用

两层引用

三层引用

四层引用

五层引用

7、分割线

有些作者很喜欢用水平分割线,也称分隔符或横线,在 Markdown 中,分割线的写法与标题的第二种写法十分相似,在新的一行连续输入 3 个或 3 个以上的星号即可。

星号之间可以有空格,且星号还可以用减号或下划线来代替。需要注意的是,如果用减号,那分割线与上面的段落之间需要空出一行,否则分割线就会与上面的段落组成二级标题了。

示例一下,输入文本如下:

***
* * *

---(注意:此行的上一行是空着的)
___

显示效果如下:
**
* *



8、总结

本文主要讲解了 Markdown 的七大标准语法的用法。掌握了这七大标准语法,就足够应对 Markdown 的一般写作需求了。

通过本文示例可见,Markdown 的语法完全由标点符号构成,且标点符号经过精心挑选,看起来比较直观形象。例如,文本周围的*看起来像是在强调,分割线看起来就像是横线,列表排列看起来就像是列表。

本文链接:http://www.cnblogs.com/hanzongze/p/markdown-standards.html
版权声明:本文为博客园博主 韩宗泽 原创,作者保留署名权!欢迎通过转载、演绎或其它传播方式来使用本文,但必须在明显位置给出作者署名和本文链接!个人博客,能力有限,若有不当之处,敬请批评指正,谢谢!

Markdown温故知新(2):详解七大标准语法

标签:http   分割线   方便   处理   法规   列表   代码块   嵌套   百度一下   

原文地址:https://www.cnblogs.com/hanzongze/p/markdown-standards.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!