0%

Markdown的基本语法

概述

Markdown是一种轻量级的[标记语言],它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。看到这里请不要被[标记]、[语言]所迷惑,Markdown的语法十分简单。常用的标记符号也不超过十个,这种相对于更为复杂的HTML标记语言来说,Markdown可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永逸的效果。

废话不多说,直接开干,来看看Markdown的基本语法规则。

标题

标题是每篇文章都需要也是最常用的格式,在Markdown中,如果一段文字被定义为标题,只须在这段文字前加#号即可。
例如:

1
2
3
4
5
6
7
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

效果:

一级标题

二级标题

三级标题

四级标题

五级标题

####### 六级标题

以此类推,总共六级标题,建议在#号后加一个空格,这是最标准的Markdown语法。
特别的,还可使用=(高阶标题)和-(次阶标题)标记一级和二级标题。
例如:

1
2
3
4
这是高阶标题(效果和一级标题一样)
=
这是次阶标题(效果和二级标题一样)
-

效果:
这是高阶标题(效果和一级标题一样)
=
这是次阶标题(效果和二级标题一样)
-

注意:=和-标记标题时,=和-的个数在不同的编辑器中都有不同,我在简书中测试时,=和-的个数大于等于2个都可以表示,但是在Cmd Markdown中只要1个就可表示,还有说必须要三个或者以上的,我真不知道该相信谁的了,谁能告诉我!

段落

段落的前后要有空行,所谓的空行是指没有文字内容。若想在段内强制换行的方式是使用两个或以上空格加上回车(引用中换行省略回车)。

列表

熟悉HTML的同学肯定知道有序列表与无序列表的区别,在Markdown下,列表的显示只需要在文字前加上-、+或*即可变为无序列表,有序列表则直接在文字前加1. 2. 3.符号和文字之前加上一个字符的空格。
例1,有序列表

1
2
3
1. 第一点
2. 第二点
4. 第三点

效果:

  1. 第一点
  2. 第二点
  3. 第三点

例2,无序列表

1
2
3
- 这是无序列表项目
+ 这是无序列表项目
* 这是无序列表项目

效果:

  • 这是无序列表项目
  • 这是无序列表项目
  • 这是无序列表项目

两个列表之间不能相邻,否则会解释为嵌套的列表。例3,是嵌套的列表

1
2
3
4
5
6
7
+ 呵呵
* 嘉嘉
- 嘻嘻
- 吼吼
- 嘎嘎
+ 桀桀
* 哈哈

效果:

  • 呵呵
    • 嘉嘉
    • 嘻嘻
    • 吼吼
      • 嘎嘎
      • 桀桀
  • 哈哈

注意

  1. 标记后面最少有一个空格或制表符。
  2. 若不在引用区块中,必须和前方段落之间存在空行,后面最好还是空一行,否则会解释为嵌套的列表。
  3. 有序列表标记不是按照你写的数字进行显示的,而是根据当前有序列表标记所在位置显示的,如示例1所示。
  4. 无序列表的项目符号是按照实心圆、空心圆、实心方格的层级关系递进的,如例3所示。通常情况下,同一层级使用同一种标记表示,便于自己查看和管理。

引用

如果你需要引用一小段别处的句子,那么就要用引用的格式。只需要在文本前加入>这种尖括号(大于号)即可。
例如:

1
> 这是引用

效果:

这是引用

特别的,引用还可以嵌套,例如:

1
2
3
4
5
> 这是一级引用
>> 这是二级引用
>>> 这是三级引用

> 这是一级引用

效果:

这是一级引用

这是二级引用

这是三级引用

这是一级引用

再如:

1
2
3
4
> 这是一级引用
>> 这是二级引用
>>> 这是三级引用
> 这是一级引用

效果:

这是一级引用

这是二级引用

这是三级引用
这是一级引用

  1. 从上面两例可看出,如果>、>>和>>>等嵌套使用的话,从>>>退到>时,必须之间要加上一个空行作为过渡,否则默认为下一行和上一行是同一级别的引用。如上例所示。
  2. 引用完之后,必须再空一行,重新一个新的开始,否则,以后的文字都将在引用的范围内,不要问我为什么,实践出真知。

代码块

使用```表示代码块。例如:

1
2
3
4
``` javascript
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
```

效果:

1
2
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

注意

  1. 如果要显示markdown的代码块语法,可以用4个反引号, 同理代码中包含3个反引号就可以用4个反引号。
  2. ```后面的javascript表示此段代码为javascript代码,Markdown会自行使用javascript代码颜色渲染。
    附加:还可使用4个空格或者一个制表符(tab)缩进表示代码区块。

行内代码

使用``表示行内代码。例如:

1
这是`java`代码。

效果:
这是java代码。
注意:需要和普通段落之间存在空行。

链接

链接可以由两种形式生成:行内式和参考式。

  • 使用[](link "Optional title")表示行内链接。其中
  1. []内的内容为要添加链接的文字
  2. link为链接地址
  3. Optional title为显示标题。显示效果为在你将鼠标放到链接上后,会显示一个小框提示,提示的内容就是Optional title里的内容。中文显示乱码啊!差评

例如:

1
这就是行内链接:[百度](http://www.baidu.com "百度")

效果:
这就是行内链接:百度

参考式链接,例如:

1
2
3
4
5
6
7
这里我们参考:
1. [JavaScript | MDN][1]
2. [ECMAScript 6 入门 阮一峰][2]
3. [InfoQ JavaScript][3]
[1]: http://developer.mozilla.org/zh-CN/docs/Web/JavaScript
[2]: http://es6.ruanyifeng.com
[3]: http://www.infoq.com/cn/javascript/?utm_source=infoq&utm_medium=header_graybar&utm_campaign=topic_clk

效果
这里我们参考:

  1. JavaScript | MDN
  2. ECMAScript 6 入门 阮一峰
  3. InfoQ JavaScript

注意

  1. 上述的[1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript不出现在区块中。
  2. 参考式链接和行内链接的显示效果是一样的。但是在编辑状态下的使用情况不一样。行内连接紧跟链接文字,可以在看到链接文字的同时清楚的知道链接地址,但是不便于多次重复利用。参考式链接可以重复使用,但一般都是将一些链接放在一起统一管理,如一段文字后面或文章结尾,因此在找到链接和链接文字的对应关系上有些麻烦。各有利弊了,分情况使用。

图片

插入图片与插入链接的语法很像,区别在一个!号,而且也有行内式和参考式两种。
插入图片语法为:![Alt text](/path/to/img.jpg "Optional title")

Alt text为如果图片无法显示时显示的文字。
/path/to/img.jpg为图片所在路径。
Optional title为显示标题。显示效果为在你将鼠标放到图片上后,会显示一个小框提示,提示的内容就是Optional title。

行内式,例如:

1
2
### 插入图片
![图灵社区](http://www.turingbook.com/Content/img/Turing.Gif)

效果:

插入图片

图灵社区

参考式, 例如:

1
2
3
4
[图灵社区][4]
![图灵社区Logo][5]
[1]: http://www.ituring.com.cn
[2]: http://www.turingbook.com/Content/img/Turing.Gif

效果:
[图灵社区][4]
![图灵社区Logo][5]
1: http://www.ituring.com.cn
2: http://www.turingbook.com/Content/img/Turing.Gif

强调

使用**或__表示粗体。
使用*或_表示斜体。
例如:

1
2
**粗体1**   __粗体2__
*斜体1* _斜体2_

效果:
粗体1 粗体2
斜体1 斜体2

注意:

前后的*或_与要加粗或倾斜的字体之间不能有空格。

表格

表格应该是Markdown比较累人的地方,语法真是操蛋!
用|表示表格纵向边界,表头和表内容用-隔开,并可用:进行对齐设置,两边都有:则表示居中,若不加:则默认左对齐。
详细说明:

  • ----: 为右对齐
  • :---- 为左对齐
  • :---: 为居中对齐
  • ----- 为默认左对齐

注意:

- 这样的分隔符至少要有1个!目前测试是这样的!
例如1:

1
2
3
4
5
| 序号 | 交易名 | 交易说明 | 备注 |
| ---: | :----: | :------- | ---- |
| 1 | prfcfg | 菜单配置 | 可以通过此交易查询到所有交易码和菜单的对应关系 |
| 2 | gentmo | 编译所有交易 | |
| 100000 | sysdba | 数据库表模型汇总 | |

效果:

序号 交易名 交易说明 备注
1 prfcfg 菜单配置 可以通过此交易查询到所有交易码和菜单的对应关系
2 gentmo 编译所有交易
100000 sysdba 数据库表模型汇总

例如2:

1
2
3
4
5
| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned |\$1600 |
| col 2 is | centered | \$12 |
| zebra stripes | are neat | $1 |

效果:
| Tables | Are | Cool |
| ————- |:————-:| —–:|
| col 3 is | right-aligned |$1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |

例如3:

1
2
3
4
5
dog | bird | cat
----|------|----
foo | foo | foo
bar | bar | bar
baz | baz | baz

效果:
dog | bird | cat
—-|——|—-
foo | foo | foo
bar | bar | bar
baz | baz | baz

注意

最好还是和普通段落之间存在空行吧!虽然在Cmd Markdown中是不需要空一行的,但是在简书中测试就操蛋了。

分隔符

分割线最常使用就是三个或以上*,还可以使用-和_。
例如:

1
2
3
4
5
***

---

___

效果:




注意:

  1. 只要*或者-大于等于三个就可组成一条平行线。
  2. 使用---作为水平分割线时,要在它的前后都空一行,防止---被当成标题标记的表示方式。

反斜杠

使用\表示反斜杠,相当于反转义作用。在你不想显示Markdown标记时可以使用反斜杠。
Markdown支持的转义字符列表:

1
2
3
4
5
6
7
8
9
10
11
12
\   反斜线
` 反引号
* 星号
_ 底线
{} 花括号
[] 方括号
() 括弧
# 井字号
+ 加号
- 减号
. 英文句点
! 惊叹号

删除线

使用~~表示删除线。
例如:

1
~~这是一条删除线~~

效果:
这是一条删除线

注意

~~和要添加删除线的文字之间不能有空格。

注脚

使用[^footer1]表示注脚。
例如:

1
2
这是一个注脚测试[^footer1]
[^footer1]: 这是一个测试,用来阐释注脚。

效果:
这是一个注脚测试[^footer1]
[^footer1]: 这是一个测试,用来阐释注脚。

标签分类

使用标签:或者Tags:表示标签标记。
例如:

1
2
标签: 数学 英语
Tags: 数学 英语

注意

  1. 标签:或者Tags:中的冒号要使用半角冒号
  2. 基本没使用过这个标记,不过应用场景应该是归类。便于快速了解文章分类。难道可以通过某种方式来遍历到标签标记?不甚了解。如你知道:请告诉我。

锚点

锚点功能可参考Github(我还未玩,忽略)。在Github的md 文件中,会为每个h1~h6标签,自动塞入一个a标签,并渲染好id。