# Markdown 教程
# 样式转换工具
https://md.openwrite.cn/
1
# 1、自定义容器
注：vuepress默认主题支持的容器
::: tip
这是一个提示
:::
::: warning
这是一个警告
:::
::: danger
这是一个危险警告
:::
::: details
这是一个详情块，在 IE / Edge 中不生效
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- 演示
TIP
这是一个提示
WARNING
这是一个警告
DANGER
这是一个危险警告
DETAILS
这是一个详情块，在 IE / Edge 中不生效
# 2、标题
注：# 后面保持空格
# topic h1
## topic h2
### topic h3
#### topic h4
##### topic h5
###### topic h6
1
2
3
4
5
6
7
2
3
4
5
6
7
# 3、TOC
注：根据标题生成目录
[[TOC]]
1
2
2
# 4、引用
注：单行
> hello world!
注：多行(每行尾加两空格，才能换行)
> hello world!
> hello world!
> hello world!
或
> hello world!
hello world!
hello world!
注：多层嵌套
> aaaaaaaaa
>> bbbbbbbbb
>>> cccccccccc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- 演示
hello world!
hello world!
hello world!
hello world!
hello world!
hello world!
hello world!
aaaaaaaaa
bbbbbbbbb
cccccccccc
# 5、行内标记
注：用 ` 标记代码块将变成一行
标记之外`hello world`标记之外
标记之外 `
<div>
<div></div>
<div></div>
<div></div>
</div>
`标记之外
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
- 演示
标记之外hello world标记之外
标记之外 <div> <div></div> <div></div> <div></div> </div>标记之外
# 6、代码块
使用```包含内容
1
# 6.1、注：根据不同的语言配置不同的代码着色
- 演示
var num = 0;
for (var i = 0; i < 5; i++) {
num+=i;
}
console.log(num);
1
2
3
4
5
2
3
4
5
<!DOCTYPE html>
<html>
<body>
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</body>
</html>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 7、插入链接
[百度一下](http://www.baidu.com/)
[百度一下-带标题](http://www.baidu.com/ "百度一下-带标题")
百度一下-直接链接：http://www.baidu.com/
1
2
3
2
3
- 演示
百度一下 (opens new window)
百度一下-带标题 (opens new window)
百度一下-直接链接：http://www.baidu.com/
# 8、图片加链接
[]
[](http://www.baidu.com/ "百度一下")
1
2
2
- 演示
]
# 9、序表
有序，注：序列.后 保持空格
1. one
2. two
3. three
无序
* one
* two
* three
序表嵌套
1. one
1. one-1
2. two-2
2. two
* two-1
* two-2
序表嵌套代码块，注：换行+两个Tab
* one
var a = 10; // 与上行保持空行并 递进缩进
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
- 演示
- one
- two
- three
- one
- two
- three
- one
- one-1
- two-2
- two
- two-1
- two-2
- one
var a = 10; - two
var b = 11;
# 10、任务列表
注：兼容性一般 要隔开一行
- [x] 选项一
- [ ] 选项二
- [ ] 选项三
1
2
3
4
2
3
4
- 演示
- [x] 选项一
- [ ] 选项二
- [ ] 选项三
# 11、表格
注： : 代表对齐方式 ,** : 与 | 之间不要有空格**，否则对齐会有些不兼容
| a | b | c |
|:-------:|:------------- | ----------:|
| 居中 | 左对齐 | 右对齐 |
|=========|===============|============|
简约写法
a | b | c
:-:|:- |-:
居中 | 左对齐 | 右对齐
============|=================|=============
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
- 演示
| a | b | c |
|---|---|---|
| 居中 | 左对齐 | 右对齐 |
| ========= | =============== | ============ |
| a | b | c |
|---|
居中 | 左对齐 | 右对齐
============|=================|=============
# 12、支持内嵌CSS样式
<p style="color: #AD5D0F;font-size: 30px; font-family: '宋体';">内联样式</p>
1
- 演示
内联样式
# 13、语义标记
| 描述 | 效果 | 代码 |
|---|---|---|
| 斜体 | 斜体 | *斜体* |
| 斜体 | 斜体 | _斜体_ |
| 加粗 | 加粗 | **加粗** |
| 加粗+斜体 | 加粗+斜体 | ***加粗+斜体*** |
| 加粗+斜体 | 加粗+斜体 | **_加粗+斜体_** |
| 删除线 | ~~删除线~~ | |
| 下划线 | ++下划线++ | ++下划线++ |
# 14、语义标签
| 描述 | 效果 | 代码 |
|---|---|---|
| 斜体 | 斜体 | <i>斜体</i> |
| 加粗 | 加粗 | <b>加粗</b> |
| 强调 | 强调 | <em>强调</em> |
| 上标 | Za | Z<sup>a</sup> |
| 下标 | Za | Z<sub>a</sub> |
| 键盘文本 | Ctrl | <kbd>Ctrl</kbd> |
| 换行 | <br/>或两个空格 |
# 15、分隔符
注：最少三个 --- 或 ***或 * * *
代码
***
---
* * *
1
2
3
4
5
6
7
2
3
4
5
6
7
- 演示
手机看
