Markdown 语法

最新推荐文章于 2024-07-19 17:37:28 发布

风雨无阻1203

最新推荐文章于 2024-07-19 17:37:28 发布

阅读量789

点赞数 17

分类专栏： Java 文章标签： java markdown 技术文档编写

本文链接：https://blog.csdn.net/zyf1203/article/details/140048194

版权

Java 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

# Markdown 语法

# 一、标题
标题的格式：
# × 标题级数 + 空格 + 文本内容
# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题

# 二、目录
在文档的顶部输入 [toc] ，会根据标题自动生成目录 ( Table of Content )

# 三、斜体&粗体
## 3.1斜体
斜体的格式：
* + 文本内容 + *
_ + 文本内容 + _ ( 下划线 )
说明：斜体文本，首尾只有单个标识符

这是一段普通文本

*这里是一段斜体文本*

_这也是一段斜体文本_

## 3.2粗体
粗体的格式：说明：粗体文本，首尾各有两个标识符
** + 文本内容 + **
__ + 文本内容 + __ (这里是两个 _ )

**这里是一段加粗文本**

__这也是一段加粗文本__

## 3.3粗斜体 (斜粗体)

粗斜体的格式：
*** + 文本内容 + ***
___ + 文本内容 + ___ （这里是3个 _ )
**_ + 文本内容 + _**
__* + 文本内容 + *__
*__ + 文本内容 + __*
_** + 文本内容 + **_
说明：粗斜体文本，首尾各有三个标识符

这是一段普通文本

***粗斜体文本1***
___粗斜体文本2___
**_粗斜体文本3_**
__*粗斜体文本4*__
*__粗斜体文本5__*
_**粗斜体文本6**_

## 3.4斜体包含粗体

斜体中包含粗体的格式：
* 斜体文本 ** 粗体文本 ** 斜体文本 *
_ 斜体文本 __ 粗体文本 __ 斜体文本 _ （这里是两个 _ )
* 斜体文本 __ 粗体文本 __ 斜体文本 *
_ 斜体文本 ** 粗体文本 ** 斜体文本 _
说明：斜体中包含粗体，其实就是嵌套的关系，外层是斜体，内层是粗体；外层是斜体，标识符是单个；内层是粗体，标识符是两个
因为粗体是被包裹在斜体中的，所以显示效果为斜粗体

*这里是一段斜体中**包含粗体**的文字*
_这也是一段斜体中**包含粗体**的文字_
*这又是一段斜体中__包含粗体__的文字*
_这还是一段斜体中**包含粗体**的文字_

## 3.5粗体包含斜体

粗体中包含斜体的格式：
** 粗体文本 *斜体文本* 粗体文本 **
** 粗体文本 _斜体文本_ 粗体文本 **
__ 粗体文本 _斜体文本_ 粗体文本 __ （这里是两个 _ )
__ 粗体文本 *斜体文本* 粗体文本 __
说明：粗体中包含斜体，也就是嵌套的关系，外层是粗体，内层是斜体；外层是粗体，标识符是两个；内层是斜体，标识符是单个
因为斜体是被包裹在粗体中的，所以显示效果为粗斜体

**这里是一段粗体中 *包含斜体* 的文字**
__这也是一段粗体中 _包含斜体_ 的文字__
**这又是一段粗体中 _包含斜体_ 的文字**
__这还是一段粗体中 *包含斜体* 的文字__

# 四、线
## 4.1文本删除线

删除线的格式： ~~ 文本内容~~ 首尾各加两个 ~ 波浪号

~~这是一段加了删除线的文本~~

## 4.2文本下划线

下划线的格式，和 HTML 是一样的
 + 文本内容 +

这是一段加了下划线的文本

# 五、列表&引用

## 5.1有序列表

有序列表的格式：
1. + 空格 + 文本内容
说明：
输入文本内容后，敲击 Enter 自动补全格式，并进入下个有序列表
若需要在同个列表内，增加换行显示的内容 (但不进入下个列表) 敲击 Shift + Enter ，即可另起一行输入文本
在有序列表的中间，插入一个新的列表，后面列表的数字序号会自动递进一层
即便在源代码模式中修改了数字序号，渲染界面依然是依照顺序显示的

1. 这是第一个有序列表 
2. 这是第二个有序列表 
3. 这是第三个有序列表

1. 这是第一个有序列表 
这是同个列表下，另起一行的文本内容 
2. 这是第二个有序列表 
这是同个列表下，另起一行的文本内容

补充

由于有序列表存在强制排序性，它的数字序号必然是逐一递进的若你希望内容前的数字，不依照递进顺序排序，或者以整百，整十数排序
可以配合无序列表，在无序列表中输入：
数字 + . + 内容
#注意点号与内容之间，没有空格 (其实有空格也行，就是会感觉有点奇怪)

- 10.这是无序列表下，整十数排列的内容
- 20.这是无序列表下，整十数排列的内容
- 30.这是无序列表下，整十数排列的内容

- 100.这是无序列表下，整百数排列的内容
- 200.这是无序列表下，整百数排列的内容
- 300.这是无序列表下，整百数排列的内容

## 5.2无序列表

无序列表的格式：
- + 空格 + 文本内容
说明：
输入文本内容后，敲击 Enter 自动补全格式，并进入下个无序列表
若需要在同个列表内，增加换行显示的内容 (但不进入下个列表) 敲击 Shift + Enter ，即可另起一行输入文本

- 这是第1个无序列表 
- 这是第2个无序列表 
- 这是第3个无序列表

- 这是第一个无序列表 
这是同个列表下，另起一行的文本内容
- 这是第二个无序列表 
这是同个列表下，另起一行的文本内容

## 5.3 引用

引用的格式：
> + 文本内容（不需要空格)
说明：
同个引用段落内的换行直接敲击 Enter 即可
若需添加第二个独立引用段落，连续敲击两下 Enter 即可

>这是第一段引用文本的第1行 
>这是第一段引用文本的第2行 

>这是第二段引用文本的第1行 
>这是第二段引用文本内第2行

# 六、缩进&退格

在列表和引用的书写过程中，我们需要利用 ==缩进== 与 ==退格== ，让文章肌理分明，更具层级
缩进：
Tab
Ctrl + [ (左中括号)
退格：
Shift + Tab
Ctrl + ] （右中括号）

## 6.1有序列表的缩&退

1. 第一级有序列表1 
1. 第二级有序列表1 
2. 第二级有序列表2 
2. 第一级有序列表2

补充说明：
有序列表的数字序号，即便你在源代码模式里强行改掉数字，它仍然会依照顺序显示

## 6.2无序列表的缩&退

- 第一级无序列表1 
- 第二级无序列表1 
- 第二级无序列表2 
- 第一级无序列表2

## 6.3 引用的缩&退

引用的缩进和列表不同
引用需另起一行，并额外多打一个 > 来完成缩进
引用的退格与列表相同
Shift + Tab
Ctrl + ] （右中括号）

>第一级引用1 
>>第二级引用1 
>>第二级引用2 
>第一级引用2

# 七、网页链接与图像

## 7.1 网页链接

网页链接的格式：
[ + 显示文本内容 + ] + ( + 链接地址 + 空格 + " + 提示信息文本 + " + )
说明：
显示文本内容，是在渲染界面实际可见的文本，用以说明链接
提示信息文本，需鼠标悬停于显示文本内容方可触发，用于增加额外提示信息
注意 "提示信息文本" 是可选项，一般不会填
一般来讲，需按住 Ctrl + 鼠标左键点击才可跳转链接，不过也有直接鼠标点击就能跳转的

[显示文本内容](链接地址 "提示信息文本")

[百度一下，你就知道](http://www.baidu.com "按住Ctrl点击跳转百度")

## 7.2链接的加粗

格式有两种：
把一对 ** 加在 ==显示文本内容==的首尾
格式1：[**显示文本内容**](链接地址)
效果： [**百度一下**](http://www.baidu.com "按住Ctrl点击跳转百度")

格式2：**[显示文本内容](链接地址)**
效果： **[百度一下](http://www.baidu.com "按住Ctrl点击跳转百度")**

## 7.3 图像

图像格式：
图像格式，就是在网页链接前面加个 ! (英文格式的)，! 代表可见
图片的提示信息，和网页链接一样，写在 " " 内
[ ] 方括号里的文字信息在 Markdown 没啥实质的作用，只是方便在源代码模式下，
知道这个图片是什么，在渲染界面是不会显示的。有点类似于HTML img标签里的 alt属性。

![文字信息](图片链接 "提示文本信息")

![湘湖|100](https://z3.ax1x.com/2021/08/06/fuNkXq.jpg "湘湖一角1")

![湘湖](https://z3.ax1x.com/2021/08/06/fuNkXq.jpg "湘湖一角2")

# 八、表格

| 是构成表格的主要框架
- 区分表头和表格主体
: 控制表格内文本内容的对齐方式
Typora编辑器中输入 Ctrl + T 即可快速插入表格，自由定义样式

## 8.1 表格中文本内容的换行

Mardown中表格，它的宽高是由单元格数据内的文本内容撑开的
当我们输入一段很长很长的文本，它所在的单元格会变得过宽
若想对一段长文本进行换行，可以在中间插入一个 （换行标签 )

| 表头1 | 表头2 |
|:-:|:-:|
|这是第一行文本 这是另起一行的文本|普通文本|

# 九、代码域

## 9.1 行内代码

行内代码的格式：
输入两个 ` 反引号，在中间写代码内容
补充：
行内代码不一定非得写代码，也可以作为着重标记，突出显示内容
行内代码中，源代码界面和渲染界面是完全一致的，标识符会失效
所谓行内代码：只要你的屏幕足够宽，它就不会换行

`这是一段行内代码`

`<table border="1" cellspacing="0" width="500" height="500">`

`print("Hello, World!")`

`这是一行突出显示的文本内容`

## 9.2代码块

代码块的格式：
在首行和末行各加三个 ` 反引号
``` + 语言种类代码内容 ```

在首行和末行各加三个 ~ 波浪号
~~~ + 语言种类代码内容 ~~~

补充：
在代码块也不一定要写代码，可以写一段突出的文本内容
代码块中，源代码界面和渲染界面是完全一致的，标识符会失效

```语言种类
代码内容
代码内容
代码内容
```

下面是HTML代码块

```html
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
```

下面是CSS代码块

```css
.box {
width: 600px;
height: 400px;
margin: 100px auto;
background-image: linear-gradient(black 33.3%,red 33.3%, red 66.6%, yellow 66.6%, yellow);
}
```

下面是JavaScript代码块

```js
// 定义一个30个整数的数组，按顺序分别赋予从2开始的偶数；然后按顺序每五个数求出一个平均值，放在另一个数组中并输出。试编程
let arr = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60]
let newarr = [];
for (let i = 0, count = 0, sum = 0, len = arr.length; i < len; i++) {
sum += arr.shift();
count++;
if (count % 5 === 0) {
newarr.push(sum / 5);
sum = 0;
}
}
console.log(newarr);

```

下面是Python代码块

```python
#!/usr/bin/python
# -*- coding: UTF-8 -*-

i = 2
while(i < 100):
j = 2
while(j <= (i/j)):
if not(i%j): break
j = j + 1
if (j > i/j) : print i, " 是素数"
i = i + 1

print "Good bye!"
```

下面是一块突出显示的文本

```txt
这是一段
突出显示的
文本内容
```

### 9.3 代码块的嵌套

格式：

使用4个 ` 包裹 3个 `

示范

````txt
```js
// 3. 输出 100以内(不包括100) 所有偶数的和
// 这类求和问题的核心：利用循环 (总和 = 旧数的和 + 新数)

let sum = 0;

for (let i = 1, sum = 0; i < 100; i++) {
if (i % 2 == 0) {
// 筛选偶数
sum += i; // sum = sum + i // 累加偶数并赋值给sum
// sum为(旧的，已经进入循环的数)的和，i 为新进入循环的数。当加到(最后一个新数i)时，sum就是最后的总和
}
}

console.log(sum); // 打印总和
```
````

如果要再套一层，就在最外层加 5个 ` ，以此类推……

## 9.4 如何在行内代码里显示反引号

首尾各用两个反引号`+ 空格包裹

格式：

``+空格+带`的内容+空格+``

效果：

`` 这是一段能显示`反引号`的行内代码 ``

# 十、任务列表（待办）

任务列表的格式：
- + 空格 +[ ] +空格 + 任务列表内容 ( 中括号[ ] 里面必须有个空格)
在源代码界面，在中括号内输入英文字母x
部分编辑器，在中括号内输入任意字符都可以打 √

格式：

- [ ] 待办任务列表1
- [ ] 待办任务列表2
- [x] 已办任务列表1 
- [x] 已办任务列表2

示范

-[ ] 第一级待办列表1
-[ ] 第二级待办列表1
-[x] 第三级已办列表1
-[x] 第三级已办列表2
-[ ] 第二级待办列表2
-[ ] 第一级待办列表2

# 十一、注释

注释的格式：

注释可以是单行，也可以是多行

# 十二、变量

## 12.1 网页链接变量

网页链接变量的格式：
首先输入
[显示文本内容] + [变量名]
变量名可以自己取，没啥限制，任意字符都可以

在文档任意一个区域，输入：
[变量名] + : + 空格 + 链接地址（这个空格不打也没事)

例如：

[百度一下，你就知道][度娘]
[知乎-有问题，就会有答案][知乎]

[度娘]: http://www.baidu.com
[知乎]: https://www.zhihu.com

## 12.2 脚注

脚注的格式：
在需要脚注的地方，输入：
[^脚注代号] ( 脚注代号会直接显示在渲染界面 )
脚注代号可以随便命名，不过推荐使用数字序号

在其他区域，输入：
[^脚注代号] + : + 空格 + 脚注内容（这个空格不打也没事)

例如：

鲁迅原名是什么[^1] ，浙江哪里人[^2]

[^1]: 周树人
[^2]: 绍兴人

# 十三、转义字符
\ 的作用是让标识符转义变为一个普通字符，完成这个效果后，反斜线会自动隐藏

[链接里的 \[中括号\] 能被正常显示](https://www.runoob.com)

# 十四、空格&换行

可以使用 HTML中空格的字符实体 ——  
若要添加多个空格，就输入多个 ——        
格式：

效果：

这里有      6个空格分隔

在单独一行中使用，增加额外的空行间距 -
如果要增加多个，就输入多个 —— - #注意当单独一行使用 标签的时候，如果前后有标题标识符或者列表标识符，确保 br元素前后两行都是空白行

效果：

这里是第一段文本
 
这里是第二段文本

# 十四、 Latex 数学公式

主要用于数学公式与化学公式的书写

## 14.1 行内公式

格式：
$ + 行内公式 + $

示例：
$x^2 + 2x + 5 + \sqrt x = 0$
$\ce{CO2 + C -> 2 CO}$
$\ce{CO2 + C -> 2 CO}$
$\ce{2Mg + O2 ->[燃烧] 2 MgO}$

效果：

$x^2 + 2x + 5 + \sqrt x = 0$

$e^{i\pi} + 1 = 0$

$\ce{CO2 + C -> 2 CO}$

$\ce{2Mg + O2 ->[燃烧] 2 MgO}$

## 14.2 公式块

格式：
$$ 公式块 $$

# 十五、图

## 15.1 流程图

```mermaid
graph TB
%% s=start e=end f=fork n=normal

s([开始])-->f1{{if条件}};

%% 分支点2
f1--true-->n1[if语句块]-->e([结束]);
f1--false-->f2{{else if条件}};

%% 分支点1
f2--true-->n2[else if语句块]-->e;
f2--false-->n3[else语句块]-->e;
```

```mermaid
graph LR
%% s=start e=end f= fork n=normal

%% 虚线
s[朱百六]-.->|子|n1[朱四九]-.->|子|n2[朱五四]-.->|子|f1_帝((朱八八))

%% 分支点朱八八
f1_帝-->|长子|f2[朱标]
f1_帝-->|次子|n3[朱樉]
f1_帝-->|三子|n4[朱棢]
f1_帝-->|四子|n5_帝((朱棣))

%% 分支点朱标
f2-->|长子|e1[朱雄英]
f2-->|次子|e2_帝((朱允炆))

n5_帝-->|长子|e3[朱高炽]
```

## 15.2饼图

```mermaid
pie
title 为什么总是宅在家里？
"喜欢宅" : 45
"天气太热" : 70
"穷" : 500
"关你屁事" : 95
```

## 15.3时序图

```mermaid
sequenceDiagram
%% 自动编号
autonumber
%% 定义参与者并取别名，aliases：别名
participant A as Aly
participant B as Bob
participant C as CofCai
%% 便签说明
Note left of A: 只复习了一部分
Note right of B: 没复习
Note over A,B: are contacting

A->>B: 明天是要考试吗？
B-->>A: 好像是的！

%% 显示并行发生的动作，parallel：平行
%% par [action1]
rect rgb(0, 25, 155)
par askA
C -->> A:你复习好了吗？
and askB
C -->> B:你复习好了吗？
and self
C ->>C:我还没准备复习......
end
end

%% 背景高亮，提供一个有颜色的背景矩形
rect rgb(25, 55, 0)
loop 自问/Every min
%% 可以换行
C ->> C:我什么时候 开始复习呢？
end
end

%% 可选择路径
rect rgb(153, 83, 60)
alt is good
A ->> C:复习了一点
else is common
B ->> C:我也是
end
%% 没有else时可以提供默认的opt
opt Extra response
C ->> C:你们怎么不回答我
end
endsequenceDiagram
%% 自动编号
autonumber
%% 定义参与者并取别名，aliases：别名
participant A as Aly
participant B as Bob
participant C as CofCai
%% 便签说明
Note left of A: 只复习了一部分
Note right of B: 没复习
Note over A,B: are contacting

A->>B: 明天是要考试吗？
B-->>A: 好像是的！

%% 背景高亮，提供一个有颜色的背景矩形
rect rgb(25, 55, 0)
loop 自问/Every min
%% 可以换行
C ->> C:我什么时候 开始复习呢？
end
end

%% 可选择路径
rect rgb(153, 83, 60)
alt is good
A ->> C:复习了一点
else is common
B ->> C:我也是
end
%% 没有else时可以提供默认的opt
opt Extra response
C ->> C:你们怎么不回答我
end
end
```

## 15.4 甘特图

```mermaid
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
```

## 15.5 类图

```mermaid
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
```