Markdown语法大全(够你用一辈子)
Posted wuwuFQ
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Markdown语法大全(够你用一辈子)相关的知识,希望对你有一定的参考价值。
标题
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
文本样式
> 引用文本
> 最外层
> > 第一层嵌套
> > > 第二层嵌套
引用文本
最外层第一层嵌套
第二层嵌套
*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___
==标记文本==
~~删除文本~~
斜体文本
斜体文本
粗体文本
粗体文本
粗斜体文本
粗斜体文本
标记文本
删除文本
html元素
目前支持的HTML元素有:<kbd>
<b>
<i>
<em>
<sup>
<sub>
<br>
等
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
使用 Ctrl+Alt+Del 重启电脑
代码片
`Hello Word`
Hello Word
```javascript
// An highlighted block
var foo = 'bar';
```
// An highlighted block
var foo = 'bar';
链接🔗
[访问CSDN](https://wuwufq.blog.csdn.net/)
<https://wuwufq.blog.csdn.net/>
访问CSDN
https://wuwufq.blog.csdn.net/
图片
图片: ![Alt](https://image.cha138.com/20230114/b453e47fd24944bbbde8f337a9a36639.jpg)
带尺寸的图片: ![Alt](https://image.cha138.com/20230114/b453e47fd24944bbbde8f337a9a36639.jpg =60x60)
宽度确定高度等比例的图片: ![Alt](https://image.cha138.com/20230114/b453e47fd24944bbbde8f337a9a36639.jpg =60x)
高度确定宽度等比例的图片: ![Alt](https://image.cha138.com/20230114/b453e47fd24944bbbde8f337a9a36639.jpg =x60)
居中的图片: ![Alt](https://image.cha138.com/20230114/b453e47fd24944bbbde8f337a9a36639.jpg#pic_center)
居中并且带尺寸的图片: ![Alt](https://image.cha138.com/20230114/b453e47fd24944bbbde8f337a9a36639.jpg#pic_center =60x60)
居右的图片: ![Alt](https://image.cha138.com/20230114/b453e47fd24944bbbde8f337a9a36639.jpg#pic_right)
图片:
带尺寸的图片:
宽度确定高度等比例的图片:
高度确定宽度等比例的图片:
居中的图片:
居中并且带尺寸的图片:
居右的图片:
列表
- 无序列表
* 项目
+ 项目
1. 有序列表
2. 项目2
3. 项目3
- [ ] 计划任务
- [x] 完成任务
- 无序列表
- 项目
- 项目
- 项目
- 有序列表
- 项目2
- 项目3
- 计划任务
- 完成任务
Markdown
: Text-to-HTML conversion tool
Authors
: John
: Luke
-
Markdown
- Text-to- HTML conversion tool Authors
- John
- Luke
表格
学生 | 成绩
-- | --
张三 | 80
李四 | 90
王二 | 95
| Column 1 | Column 2 | Column 2
|:--|:--:| --:|
| 文本居左 | 文本居中 | 文本居右 |
学生 | 成绩 |
---|---|
张三 | 80 |
李四 | 90 |
王二 | 95 |
Column 1 | Column 2 | Column 2 |
---|---|---|
文本居左 | 文本居中 | 文本居右 |
注脚
一个具有注脚的文本。[^1]
[^1]: 注脚的解释
一个具有注脚的文本。1
注释
Markdown将文本转换为 HTML。
插入UML图
```mermaid
sequenceDiagram
张三 ->> 李四: 你好!李四, 最近怎么样?
李四-->>王五: 你最近怎么样,王五?
李四--x 张三: 我很好,谢谢!
李四-x 王五: 我很好,谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行.
李四-->>张三: 打量着王五...
张三->>王五: 很好... 王五, 你怎么样?
```
插入甘特图
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section 现有任务
已完成 :done, des1, 2014-01-06,2014-01-08
进行中 :active, des2, 2014-01-09, 3d
计划中 :des3, after des2, 5d
```
插入Mermaid流程图
```mermaid
graph LR
A[长方形] -- 链接 --> B((圆))
A --> C(圆角长方形)
B --> D菱形
C --> D
```
插入Flowchart流程图
```mermaid
flowchat
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认?
st->op->cond
cond(yes)->e
cond(no)->op
```
插入classDiagram类图
```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
<<interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10
>>service>>
int id
size()
```