Markdown的基本语法

这篇文章最后修改于 2022-02-21 日，距今已有 274 天，请注意甄别内容是否已经过时！

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

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

标题

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

例，

代码语言：javascript复制

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

效果：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

以此类推，总共六级标题，建议在#号后加一个空格，这是最标准的Markdown语法。

特别的，还可使用=(高阶标题)和-(次阶标题)标记一级和二级标题。

例，

代码语言：javascript复制

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

效果：

这是高阶标题(效果和一级标题一样)

=

这是次阶标题(效果和二级标题一样)

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

段落

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

列表

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

例1，有序列表

代码语言：javascript复制

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

效果：

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

例2，无序列表

代码语言：javascript复制

- 这是无序列表项目
  这是无序列表项目
* 这是无序列表项目

效果：

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

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

代码语言：javascript复制

  呵呵
    * 嘉嘉
    - 嘻嘻
    - 吼吼
        - 嘎嘎
          桀桀
* 哈哈

效果：

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

注意：

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

引用

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

例，

代码语言：javascript复制

> 这是引用

效果：

这是引用

特别的，引用还可以嵌套，如：

代码语言：javascript复制

> 这是一级引用
>> 这是二级引用
>>> 这是三级引用

> 这是一级引用

效果：

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

再如：

代码语言：javascript复制

> 这是一级引用
>> 这是二级引用
>>> 这是三级引用
> 这是一级引用

效果：

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

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

代码块

使用`表示代码块。如：

var canvas = document.getElementById("canvas");

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

效果：

代码语言：javascript复制

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

注意：

这个符号是反引号，我一开始在键盘上死命的找还找不到呢？闹笑话了，这个符号在Esc`键下面，切换到英文下即可。

``后面的javascript`表示此段代码为javascript代码，Markdown会自行使用javascript代码颜色渲染。 附加：还可使用4个空格或者一个制表符（tab）缩进表示代码区块。如：

代码语言：javascript复制

 /** 
   * nth element in the fibonacci series. 
   * @param n >= 0 

代码语言：javascript复制

  */
function fib(n) { 
    var a = 1, b = 1; 
    var tmp; 
    while (--n >= 0) { 
        tmp = a;
        a  = b; 
        b = tmp;
    }
    return a; 
}
document.write(fib(10));

代码语言：javascript复制

效果：

/**

• nth element in the fibonacci series.
• @param n >= 0
• @return the nth element, >= 0.

*/

function fib(n) {

代码语言：javascript复制

var a = 1, b = 1; 
var tmp; 
while (--n >= 0) { 
    tmp = a;
    a  = b; 
    b = tmp;
}
return a; 

}

document.write(fib(10));

代码语言：javascript复制

但是这样写代码太费劲了，每行的开头都要空4个空格啊！要是成千上万行代码呢？那不把人累死啊！这种方式一定是**差评**啊！
少量的代码还可以接受啊！例，

代码语言：javascript复制

void main()
{
    printf("Hello, Markdown.");
}

代码语言：javascript复制

效果：

void main()

{

代码语言：javascript复制

printf("Hello, Markdown.");

}

代码语言：javascript复制

### 行内代码

使用``表示行内代码。如：

这是java代码。

代码语言：javascript复制

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

### 链接

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

- 使用`[](link "Optional title")`表示行内链接。其中

1. `[]`内的内容为要添加链接的文字
2. `link`为链接地址
3. `Optional title`为显示标题。显示效果为在你将鼠标放到链接上后，会显示一个小框提示，提示的内容就是`Optional title`里的内容。中文显示乱码啊！**差评**

例，

这就是行内链接：羽翼博客

代码语言：javascript复制

效果：
这就是行内链接：[羽翼博客](https://www.886a.top/)

- 参考式链接

例，

这里我们参考：

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

代码语言：javascript复制

效果：
这里我们参考：

1. [JavaScript | MDN][1]

2. [ECMAScript 6 入门 阮一峰][2]

3. [InfoQ JavaScript][3]

   [1]: http://developer.mozilla.org/zh-CN/docs/Web/JavaScript(https://link.jianshu.com/?t=http://developer.mozilla.org/zh-CN/docs/Web/JavaScript)
   [2]: http://es6.ruanyifeng.com(https://link.jianshu.com/?t=http://es6.ruanyifeng.com)
   [3]: http://www.infoq.com/cn/javascript/?utm_source=infoq&utm_medium=header_graybar&utm_campaign=topic_clk(https://link.jianshu.com/?t=http://www.infoq.com/cn/javascript/?utm_source=infoq&utm_medium=header_graybar&utm_campaign=topic_clk)

   **注意：**

4. 上述的`[1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript`不出现在区块中。

5. 参考式链接和行内链接的显示效果是一样的。但是在编辑状态下的使用情况不一样。行内连接紧跟链接文字，可以在看到链接文字的同时清楚的知道链接地址，但是不便于多次重复利用。参考式链接可以重复使用，但一般都是将一些链接放在一起统一管理，如一段文字后面或文章结尾，因此在找到链接和链接文字的对应关系上有些麻烦。各有利弊了，分情况使用。

### 图片

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

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

例，行内式：

插入图片

代码语言：javascript复制

效果：

### 插入图片

![星空社区](https://for.886a.top/wp-content/pict/xkselogo.png)



例，参考式：

星空社区

星空社区Logo

代码语言：javascript复制

效果：
[星空社区][4]
![星空社区Logo][5]

[4]: https://for.886a.top)
[5]: https://for.886a.top/wp-content/pict/xkselogo.png



插入图片的地址需要图床(什么是图床呢???)，这里推荐[围脖图床修复计划](https://link.jianshu.com/?t=http://weibotuchuang.sinaapp.com)与[CloudApp](https://link.jianshu.com/?t=http://www.getcloudapp.com)的服务，生成URL地址即可。
**推荐工具**
图床工具用来上传图片获取`URL`地址。

- [Droplr](https://link.jianshu.com/?t=http://droplr.com)
- [CloudApp](https://link.jianshu.com/?t=http://www.getcloudapp.com)
- [ezShare for Mac](https://link.jianshu.com/?t=https://itunes.apple.com/cn/app/yi-xiang/id672522335?mt=12&uo=4)
- [围脖图床修复计划](https://link.jianshu.com/?t=http://weibotuchuang.sinaapp.com)

首次上传本地图片时，发现`Cmd Markdown`对普通用户不友好，搞的差点放弃了，还得进阶为高级用户上传本地图片功能才能使用，但我穷啊！以上推荐工具我也没用，什么是图床工具，我都不清楚，还是不搞了。
哈哈，那我就用新浪微博或者QQ空间存储照片了，搞笑吧！

### 强调

使用`**`或`__`表示粗体。
使用`*`或`_`表示斜体。
例，

粗体1粗体2

斜体1斜体2

代码语言：javascript复制

效果：
**粗体1** **粗体2**
*斜体1* *斜体2*
**注意：**前后的`*`或`_`与要**加粗**或*倾斜*的字体之间不能有空格。

### 表格

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

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

**注意：**`-`这样的分隔符至少要有1个！目前测试是这样的！
例1，

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

代码语言：javascript复制

这种语法生成的表格如下：

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

例2，

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

代码语言：javascript复制

这种语法生成的表格如下：

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

例3，

dog	bird	cat
foo	foo	foo
bar	bar	bar
baz	baz	baz

代码语言：javascript复制

这种语法生成的表格如下：

| dog  | bird | cat  |
| ---- | ---- | ---- |
| foo  | foo  | foo  |
| bar  | bar  | bar  |
| baz  | baz  | baz  |

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

### 分割线

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

---

---

---

代码语言：javascript复制

效果：

------

------

------

**注意：**

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

### 反斜杠

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

反斜线

` 反引号

• 星号

_ 底线

{} 花括号

[] 方括号

() 括弧

井字号

• 加号
• 减号

. 英文句点

! 惊叹号

代码语言：javascript复制

### 删除线

使用`~~`表示删除线。
例，

这是一条删除线

代码语言：javascript复制

效果：
~~这是一条删除线~~
**注意：**`~~`和要添加删除线的文字之间不能有空格。

### 注脚

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

这是一个注脚测试1

代码语言：javascript复制

效果：
这是一个注脚测试[[1]](https://www.jianshu.com/p/250e36bb5690#fn1)

### 标签分类

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

标签: 数学 英语

Tags: 数学 英语

代码语言：javascript复制

效果(**有个毛的效果**)：
标签: 数学 英语
Tags: 数学 英语
**注意：**

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

### 锚点

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

h1

代码语言：javascript复制

以上`md`语言被渲染成`html`如下：

h1

代码语言：javascript复制

不去管`svg`部分，可以看到`h1`标签内嵌入了一个`id`为 "`user-content-h1`"的`a`标签，如果标题为`# html5`，那么`id`就会是 `user-content-html5`。这样就可以用类似下面的语句对其进行跳转定位：

快点我，我要跳转到h1所在的位置

代码语言：javascript复制

效果：一点击`快点我，我要跳转到h1所在的位置`,即跳转到`h1`所在的位置。

我的参考如下：

1. [Markdown，你只需要掌握这几个][6]

2. [markdown在博客园的使用][7]

3. [怎样使用Markdown][8]

4. [Markdown 基本语法][9]

5. [Markdown——入门指南][10]

6. [Markdown入门指南][11]

7. [Markdown语法说明(简体中文版)][12]

   [6]: http://www.cnblogs.com/crazyant007/p/4220066.html(https://link.jianshu.com/?t=http://www.cnblogs.com/crazyant007/p/4220066.html)
   [7]: http://www.cnblogs.com/zichi/p/4788229.html(https://link.jianshu.com/?t=http://www.cnblogs.com/zichi/p/4788229.html)
   [8]: http://www.ituring.com.cn/article/23(https://link.jianshu.com/?t=http://www.ituring.com.cn/article/23)
   [9]: https://github.com/younghz/Markdown(https://link.jianshu.com/?t=https://github.com/younghz/Markdown)
   [10]: http://www.jianshu.com/p/1e402922ee32(https://www.jianshu.com/p/1e402922ee32)
   [11]: http://www.jianshu.com/p/468f111d8fd3(https://www.jianshu.com/p/468f111d8fd3)
   [12]: http://wowubuntu.com/markdown(https://link.jianshu.com/?t=http://wowubuntu.com/markdown)

---

1. 这是一个测试，用来阐释注脚。 ↩

markdown javascript canvas

0 人点赞