Markdown 简明教程

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

# 使用 Markdown 的优点

专注你的文字内容而不是排版样式.
轻松的导出 HTML、PDF 和本身的 .md 文件.
纯文本内容, 兼容所有的文本编辑器与字处理软件.
可读, 直观. 适合所有人的写作语言.

# 工具

工具茫茫多

# 语法

# 标题

标题有六级

由 # 组成

类比于 h1 ~ h6

例如:


# 这是一级标题（H1，通常用于文档标题）

## 这是二级标题（H2，有些渲染器会为二级标题添加 hr 底线）

### 这是三级标题（H3）

#### 这是四级标题（H4）

##### 这是五级标题（H5）

###### 这是六级标题（H6）

1
2
3
4
5
6
7
8
9
10
11
12
13

效果:

# 这是一级标题(H1, 通常用于文档标题)

# 这是二级标题(H2, 有些渲染器会为二级标题添加 hr 底线)

# 这是三级标题(H3)

# 这是四级标题(H4)

# 这是五级标题(H5)

# 这是六级标题(H6)

注: 在 # 后加一个空格再跟标题

# 首行缩进

写文章时, 我们常常希望能够首行缩进, 这时可以在段首加入 &ensp; 或   来输入一个空格. 加入 &emsp; 来输入两个空格. 这里的空格是英文状态的空格, 英文状态的两个空格相当于中文状态的一个空格

# 添加空行

添加空行可以结束先前的格式状态. 个人建议在改变格式时均添加一个空行

例如:


> 引用状态

[空行]

### 标题状态

[空行]
---
[空行]

* 列表状态
* 列表状态

[空行]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果:

引用状态

# 标题状态

列表状态
列表状态

# 换行

换行的时候结尾要加上两个空格.

在当前行的结尾加 2 个空格

这行就会新起一行

# 分隔符

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线, 行内不能有其他东西. 你也可以在星号或是减号中间插入空格. 当前后都有段落时, 请空出一行. 下面每种写法都可以建立分隔线:

前面的段落
[空行]

* * *

***

*****

- - -

---------------------------------------
[空行]
后面的段落

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

前面的段落

后面的段落

# 强调

斜体: 使用两个 * 或 _ 中间夹杂的就是斜体, 例如: *斜体* _斜体_ 斜体斜体
粗体: 使用四个 * 或 _ 中间夹杂的就是粗体, 例如: **粗体** __粗体__ 粗体粗体
粗斜体文本: 使用八个 * 或 _ 中间夹杂的就是粗斜体文本, 例如: ****粗斜体**** ____粗斜体____ 粗斜体 粗斜体
删除线: 使用两个波浪线 ~ 中间夹杂的就是删除线, 例如: ~~删除线~~ ~~删除线~~

但是, 如果你的 * 、 _ 和 ~ 两边都有空白的话, 它们就只会被当成普通的符号: 这是一段* 文本强调 *的说明示例.

\*如果要在文字前后直接插入普通的星号或底线，你可以用反斜线（转义符）\* : *如果要在文字前后直接插入普通的星号或底线, 你可以用反斜线(转义符)*

# 无序列表

使用 + - * 都表示无序列表

注: 后面也需要跟一个空格

例如:


* 使用 - 号
  - 吃饭
  - 睡觉
  - 打豆豆
  - 再打豆豆
    - 接着打豆豆
* 使用 + 号
  + 吃饭
  + 睡觉
  + 打豆豆
* 使用 * 号
  * 吃饭
  * 睡觉
  * 打豆豆

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

效果:

使用 - 号
- 吃饭
- 睡觉
- 打豆豆
- 再打豆豆
  - 接着打豆豆
使用 + 号
- 吃饭
- 睡觉
- 打豆豆
使用 * 号
- 吃饭
- 睡觉
- 打豆豆

# 有序列表

使用 1. 2. 3. 可以表示有序列表

注: 后面也需要跟一个空格

例如:


1. 买菜
4. 洗菜
5. 切菜
8. 炒菜
9. 吃菜
6. 洗碗

1
2
3
4
5
6
7
8

效果:

买菜
洗菜
切菜
炒菜
吃菜
洗碗

注: 前面数字可以不按顺序来

# 列表嵌套


1. 列出所有元素：
    - 无序列表元素 A
        1. 元素 A 的有序子列表
    - 前面加四个空格
2. 列表里的多段换行：

    前面必须加四个空格，
    这样换行，整体的格式不会乱

3. 列表里引用：

    > 前面空一行

    > 仍然需要在 >  前面加四个空格

4. 列表里代码段：

    前面四个空格, 之后按代码语法书写

        或者直接空八个，引入代码块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

列出所有元素:
- 无序列表元素 A
  1. 元素 A 的有序子列表
- 前面加四个空格
列表里的多段换行:

前面必须加四个空格，这样换行，整体的格式不会乱
列表里引用:

前面空一行

仍然需要在 > 前面加四个空格
列表里代码段:

前面四个空格，之后按代码语法书写
```
或者直接空八个，引入代码块
```

# 引用

使用 > 表示引用

例如:

> 海明威曾经写过：我可以被杀死，但是不可以被打败

效果:

海明威曾经写过: 我可以被杀死, 但是不可以被打败

# 引用嵌套


* 引用里嵌套引用

> 最外层引用
> > 多一个 > 嵌套一层引用
> > > 可以嵌套很多层

* 引用里嵌套列表

> - 这是引用里嵌套的一个列表
> - 还可以有子列表
> * 子列表需要从 - 之后延后四个空格开始

1
2
3
4
5
6
7
8
9
10
11
12
13

引用里嵌套引用

最外层引用

多一个 > 嵌套一层引用

可以嵌套很多层

引用里嵌套列表

这是引用里嵌套的一个列表

还可以有子列表

子列表需要从 - 之后延后四个空格开始

# 表格


| 默认对齐 | 居左对齐 | 居中对齐 | 居右对齐 |
|---|:---|:---:|---:|
| 窗前 | 明月 | 光 |, |
| 疑是 | 地上 | 霜 |, |

| 姓名 | 性别 | 年纪 | 班级 |
|--|:--|:--:|--|
| 张三 | 男 | 29|0830|
| 李四 | 女 | 28|0830|

| 时间 | 地点 | 人物 | 事件事件事件事件事件事件事件 |
|--|--|--|:--:|
| 上午 | 北京 | 我 | 吃面 |

| <div style="width: 265px;">可以在表头设置固定宽度</div> | 默认宽度 |
| -- | -- |
| 我的宽度为 265px | 我的宽度是默认的 |

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果：

默认对齐	居左对齐	居中对齐	居右对齐
窗前	明月	光	，
疑是	地上	霜	，

姓名	性别	年纪	班级
张三	男	29	0830
李四	女	28	0830

时间	地点	人物	事件事件事件事件事件事件事件
上午	北京	我	吃面

可以在表头设置固定宽度	默认宽度
我的宽度为 265px	我的宽度是默认的

注：表格开始与结尾都需要一行空行

# 插入代码

插入代码的方式有两种

在每行代码前加入 4 个空格或者添加一个制表符（TAB 键）. 制表符长度为 4
在代码两侧添加三个反引号 ```。

# 方式一

其缩进是相对于当前格式状态下的。

例如：


* 列表项
* 列表项

[空行]
[TAB][TAB]console.log('hello world!')
[空行]
本例中制表符长度为 2

1
2
3
4
5
6
7
8
9

效果：

列表项
列表项
```
console.log('hello world!')
```

# 方式 2

如果你只想高亮语句中的某个函数名或关键字，可以使用这个符号 ` 中间夹着代码: `function_name()` function_name() 实现

通常编辑器根据代码片段适配合适的高亮方法，但你也可以用 ``` 包裹一段代码，并指定一种语言

```js

$(document).ready(function () {

alert('hello world');

});

```

1
2
3
4
5
6
7
8
9

// js
$(document).ready(function() {
  alert('hello world')
})

1
2
3
4

<!-- html -->
<ul>
  <li>好好学习</li>
  <li>天天向上</li>
  <li>锻炼身体</li>
</ul>

1
2
3
4
5
6

/* css */
a {
  color: red;
}

1
2
3
4

支持的语言: 1c, abnf, accesslog, actionscript, ada, apache, applescript, arduino, armasm, asciidoc, aspectj, autohotkey, autoit, avrasm, awk, axapta, bash, basic, bnf, brainfuck, cal, capnproto, ceylon, clean, clojure, clojure-repl, cmake, coffeescript, coq, cos, cpp, crmsh, crystal, cs, csp, css, d, dart, delphi, diff, django, dns, dockerfile, dos, dsconfig, dts, dust, ebnf, elixir, elm, erb, erlang, erlang-repl, excel, fix, flix, fortran, fsharp, gams, gauss, gcode, gherkin, glsl, go, golo, gradle, groovy, haml, handlebars, haskell, haxe, hsp, htmlbars, http, hy, inform7, ini, irpf90, java, javascript, json, julia, kotlin, lasso, ldif, leaf, less, lisp, livecodeserver, livescript, llvm, lsl, lua, makefile, markdown, mathematica, matlab, maxima, mel, mercury, mipsasm, mizar, mojolicious, monkey, moonscript, n1ql, nginx, nimrod, nix, nsis, objectivec, ocaml, openscad, oxygene, parser3, perl, pf, php, pony, powershell, processing, profile, prolog, protobuf, puppet, purebasic, python, q, qml, r, rib, roboconf, rsl, ruby, ruleslanguage, rust, scala, scheme, scilab, scss, smali, smalltalk, sml, sqf, sql, stan, stata, step21, stylus, subunit, swift, taggerscript, tap, tcl, tex, thrift, tp, twig, typescript, vala, vbnet, vbscript, vbscript-html, verilog, vhdl, vim, x86asm, xl, xml, xquery, yaml, zephir

在这里 (opens new window) 可以找到 github 支持的语言

反引号最好在代码的前后行添加, 而不是直接加在代码两边.

如你不需要代码高亮, 可以用下面的方法禁用:

```
nohighlight

// js

$(document).ready(function () {

alert('hello world');

});

```

1
2
3
4
5
6
7
8
9
10
11
12

// js
$(document).ready(function () {
  alert('hello world');
});

1
2
3
4

# 链接

下面是行内链接示例:

[百度](http://www.baidu.com)
http://www.baidu.com
<http://www.baidu.com>

1
2
3

百度 (opens new window)

http://www.baidu.com

http://www.baidu.com (opens new window)

下面是一个参考链接的示例:

[链接到百度][1]

[链接到 Google][2]

[还是链接到百度][1]

[1]:https://www.baidu.com
[2]:https://www.google.com

注：
'[1]:https://www.baidu.com' 和 '[2]:https://www.google.com' 这几个链接可以写到文章的最后，就相当于 word 中的引用

1
2
3
4
5
6
7
8
9
10
11

效果:

链接到百度 (opens new window)

链接到 Google (opens new window)

还是链接到百度 (opens new window)

# 图片


![图片的 alt](图片的路径，可以是相对路径，也可以是绝对路径 "图片的 title")

例如：

![无名](/img/markdown/001.jpg "无名")

其中图片的 alt 和 title 可以不写
例如：
![](/img/markdown/001.jpg)

1
2
3
4
5
6
7
8
9
10

效果:

图片也可以使用参考链接的形式

![无名][id]

[id]: /img/markdown/001.jpg "无名"

1
2
3

# 限制图片大小并居中

许多 MarkDown 编辑器中直接按原图大小显示图片, 造成版面凌乱. 使用该命令 <img src="图片地址" width="图片显示宽度" height="显示高度" alt="图片名称"/> 设置图片大小, 再用 <div style="text-align:center"></div> 命令包裹达到居中效果.

<div style="text-align:center">
  <img src="/img/markdown/002.gif" width="300" alt="发糖了!!!" />
</div>

1
2
3

# 使用表情

Git 中的 Markdown 语法扩展中包括了一些表情包.

用法: 使用两个冒号将表情夹杂起来即可

例如:

表情一：:tada:, 表情二：:bug:

效果:

表情一: 🎉 , 表情二: 🐛

# 忽略 Markdown 关键字 (转义)

和 C 语言 printf 函数一样, 如果我们不想让某个字符转换成 Markdown 关键字, 可以在前面加上 \ . 比如我们想输入两个 *, 就可以用:

\*\* 取消 Markdown 关键字

效果: ** 取消 Markdown 关键字

# 折叠内容

当有一大段内容不是那么重要时, 我们可以先折叠起来, 需要的时候再展开查看

例如:

<details>
<summary>Title</summary>

content!!!
</details>

1
2
3
4
5

效果:

Title

content!!!

# 实践

# 参考资料

编辑

#Markdown

上次更新: 2/20/2022, 11:06:54 AM

git 基本指令→