Markdown详解
微冷 2021/9/9 javaMarkdown
# 一、标题
- 格式：# 标题内容
- 几个#就代表几级标题
- 标题内容和#之间有空格
# 示例
# 这是一级标题
## 这是二级标题，二级标题底下有横线
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题
1
2
3
4
5
6
2
3
4
5
6
# 二、字体
- 斜体：左右各一个*
- 加粗：左右各两个*
- 斜体加粗：左右各三个*
- 删除：左右各两个～～
# 示例
*这是倾斜的文字* <br/>
**这是加粗的文字** <br/>
***这是斜体加粗的文字*** <br/>
~~这是加删除线的文字~~
1
2
3
4
2
3
4
# 效果
这是倾斜的文字
这是加粗的文字
这是斜体加粗的文字
这是加删除线的文字
# 三、列表
- 无序列表：无序列表用 - + * 任何一种加上一个空格再加内容
- 有序列表：数字加点空格加内容
- 列表嵌套：第二行缩进两个空格就可以嵌套了
# 示例
无序列表
- 列表内容1
+ 列表内容2
* 列表内容3
有序列表
1. 列表内容
2. 列表内容
3. 列表内容
列表嵌套
+ 一级无序列表内容1
1. 二级有序列表内容11
2. 二级有序列表内容12
3. 二级有序列表内容13
+ 一级无序列表内容2
1. 二级有序列表内容21
2. 二级有序列表内容22
3. 二级有序列表内容23
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
# 效果
- 列表内容1
- 列表内容2
- 列表内容3 有序列表
- 列表内容
- 列表内容
- 列表内容 列表嵌套
- 一级无序列表内容1
- 二级有序列表内容11
- 二级有序列表内容12
- 二级有序列表内容13
- 一级无序列表内容2
- 二级有序列表内容21
- 二级有序列表内容22
- 二级有序列表内容23
# 四、图片
- 格式：
，含义分别如下： - 图片alt：就是显示在图片下面的文字，相当于对图片内容的解释。
- 图片地址:可以是本地路径的图片，也可以是网络上的图片。
- 图片title：是图片的标题，当鼠标移到图片上时显示的内容。title可加可不加。
# 示例
本地图片
网络图片
1
2
3
4
2
3
4
# 效果
# 五、超链接
- 格式：
[超链接名](超链接地址 "超链接title") - 同图片，但是没有前面的感叹号
# 示例
[腾讯云](https://curl.qcloud.com/2etNc1ZW "腾讯云")
1
# 效果
# 六、表格
# 示例
表头|表头|表头
---|:--:|---:
内容|内容|内容
内容|内容|内容
1
2
3
4
2
3
4
- 第二行分割表头和内容。- 有一个就行，为了书写对齐，多加了几个，内容会自动撑开表格宽度
- 文字默认居左
- 在第二行“--”两边加“：”表示文字居中
- 在第二行“--”右边加“：”表示文字居右
# 效果
| 表头 | 表头 | 表头 |
|---|---|---|
| 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 |
# 七、代码块
- 单行代码：代码之间分别用一个反引号`包起来就行，或者只要开头的反引号
- 代码块儿：代码块儿是用一组三个反引号包起来，紧接着后面指定代码块儿的类型，类型如java，html，js，md等等。（可选）
- 代码高亮：指定某一行高亮显示，在类型后面加个花括号，里面指定数字就可以，数字可以是一个如：{6}，也可以是一个范围如：{2-8}，还可以是多个如：{1,3,5}（可选）
# 示例
单行代码：
`create database test;`
代码块：
```js {3-6}
function show(){
console.log("这里是js代码");
console.log("这一行是高亮的");
console.log("这一行是高亮的");
console.log("这一行是高亮的");
}
```//代码块结束
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 效果
function show(){
console.log("这里是js代码");
console.log("这一行是高亮的");
console.log("这一行是高亮的");
console.log("这一行是高亮的");
}
1
2
3
4
5
6
2
3
4
5
6
# 八、提示信息
提示信息是用一组三个冒号（:::）包起来的，第一行冒号加一个空格后面跟提示级别，再加个空格后面跟别名。
- 级别分别如下：
- tip 提示
- warning 警告
- danger 危险警告
- details 详情
- theorem 引用
# 示例
::: tip 提示
这是一个tip，使用了别名“提示”
:::
::: warning
这是一个warning，没有使用别名
:::
::: danger
这是一个danger，没有使用别名
:::
::: details 请看详情
这是一个details，使用了别名“请看详情”
:::
::: theorem 牛顿第一定律
假若施加于某物体的外力为零，则该物体的运动速度不变。
::: right
来自 [维基百科](https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B)
:::
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，使用了别名“请看详情”
# 九、引用
在引用的文字前加>即可。引用也可以嵌套，如加两个>>三个>>>
# 示例
>这是1级引用的内容
>>这是2级引用的内容
>>>这是3级引用的内容
1
2
3
4
5
2
3
4
5
# 效果
这是1级引用的内容
这是2级引用的内容
这是3级引用的内容
# 十、分割线
三个或者三个以上的 - 或者 * 都可以
# 示例
开始分割线
***
使用3个或者多个“*”的分割线
---
使用3个或者多个“-”的分割线，使用这个的时候前面要空一行，否则有时候会变成标题
1
2
3
4
5
6
2
3
4
5
6
# 效果
开始分割线
使用3个或者多个“*”的分割线
使用3个或者多个“-”的分割线，使用这个的时候前面要空一行，否则有时候会变成标题
# 十一、折叠文本
文本可以只留一个标题，剩余的内容折叠起来，有个问题在vuepress里面内容部分要和上下两个标签都隔行
# 示例
<details open>
<summary>
这里是显示的标题
</summary>
`·这里是折叠起来的内容，因为有open所以我没折叠！`
</details>
<details>
<summary>
这里是显示的标题
</summary>
> 这里是折叠起来的内容，因为没有有open所以我折叠了，怎么样你不是说看不见我？而且内容可以是各种元素。
</details>
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
# 效果
这里是显示的标题
这里是折叠起来的内容，因为有open所以我没折叠！
#
这里是显示的标题
这里是折叠起来的内容，因为没有有open所以我折叠了，怎么样你不是说看不见我？而且内容可以是各种元素。
# 十二、目录
显示当前文件的目录结构，即文档中的标题内容
# 示例
[[toc]]
1
# 效果
# 十三、导入代码段
你可以通过下述的语法导入已经存在的文件中的代码段：
<<< @/filepath
1
它也支持行高亮：
<<< @/filepath{highlightLines}
1
例如：
<<< @/../@vuepress/markdown/__tests__/fragments/snippet.js{2}
1
# 十三、额外加成
md最终是要解析成html语言的，所以理论上在他里面可以使用html标签
- table
<table border="1" cellpadding="1" cellspacing="1" style="width:680px">
<tbody>
<tr>
<td><img src="/img/logo_v.png" width="1920" /></td>
<td><img src="/img/logo_v.png" width="1920" /></td>
</tr>
</tbody>
</table>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
| |
- 修改字体颜色
<p style="color: green">
万绿从中<span style="color: red;">一点红</span>
</p>
或者说直接这样的<span style="font-size: 19px; color: chartreuse;">效果</span>
1
2
3
4
2
3
4
万绿从中一点红
或者说直接这样的效果留言：