Markdown

约 1032 字大约 5 分钟

2025-12-03

介绍Markdown的基本语法和常用功能，帮助您快速掌握Markdown的使用方法。

标题

Markdown支持6级标题，使用#符号表示：

## 标题H2

### 标题H3

#### 标题H4

##### 标题H5

###### 标题H6

效果展示：

标题H2

标题H3

标题H4

标题H5

标题H6

标题徽章

可以在标题中添加徽章，增强视觉效果：

## 标题2 Badge <Badge type="tip" text="Badge" />

### 标题3 Badge <Badge type="warning" text="Badge" />

#### 标题4 Badge <Badge type="danger" text="Badge" />

效果展示：

标题2 Badge Badge

标题3 Badge Badge

标题4 Badge Badge

文本格式化

基本格式化

加粗：**加粗文字**

斜体： _斜体文字_

~~删除文字~~

内容 ==标记==

效果展示：

加粗：加粗文字

斜体： 斜体文字

~~删除文字~~

内容标记

数学表达式

使用$符号包裹数学表达式：

数学表达式： $-(2^{n-1})$ ~ $2^{n-1} -1$

$\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}
ight)
= \left(\frac {y^{\omega}} {\omega}
ight) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^ Ir \cdots (r-i+1) (\log y)^{ri}} {\omega^i} \right\}$

上下标

19^th^

H~2~O

效果展示：

19^th

H₂O

内容对齐

::: center
内容居中
:::

::: right
内容右对齐
:::

效果展示：

内容居中

内容右对齐

列表

无序列表

- 无序列表1
- 无序列表2
- 无序列表3

效果展示：

无序列表1
无序列表2
无序列表3

有序列表

1. 有序列表1
2. 有序列表2
3. 有序列表3

效果展示：

有序列表1
有序列表2
有序列表3

任务列表

- [ ] 任务列表1
- [ ] 任务列表2
- [x] 任务列表3
- [x] 任务列表4

效果展示：

任务列表1
任务列表2
任务列表3
任务列表4

表格

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

效果展示：

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

引用

> 引用内容
>
> 引用内容

效果展示：

引用内容
引用内容

链接和图片

链接

[链接](/)  

[外部链接](https://github.com/pengzhanbo)

效果展示：

链接

外部链接

图片

![plume](/plume.svg)

效果展示：

plume

特殊元素

Badge

**Badge：**

- <Badge type="info" text="info badge" />
- <Badge type="tip" text="tip badge" />
- <Badge type="warning" text="warning badge" />
- <Badge type="danger" text="danger badge" />

效果展示：

Badge：

info badge
tip badge
warning badge
danger badge

图标

**图标：**

- home - <Icon name="material-symbols:home" color="currentColor" size="1em" />
- vscode - <Icon name="skill-icons:vscode-dark" size="2em" />
- twitter - <Icon name="skill-icons:twitter" size="2em" />

效果展示：

图标：

home -
vscode -
twitter -

GFM Alert

> [!note]
> note

> [!info]
> info

> [!tip]
> tip

> [!warning]
> warning

> [!caution]
> caution

> [!important]
> important

效果展示：

注

note

选项卡

::: tabs
@tab 标题1
内容区块

@tab 标题2
内容区块
:::

效果展示：

标题1

内容区块

标题2

内容区块

脚注

脚注 1 链接[^first]。

脚注 2 链接[^second]。

行内的脚注^[行内脚注文本] 定义。

重复的页脚定义[^second]。

[^first]: 脚注 **可以包含特殊标记**

    也可以由多个段落组成

[^second]: 脚注文字。

效果展示：

脚注 1 链接^[1]。

脚注 2 链接^[2]。

行内的脚注^[3] 定义。

重复的页脚定义^[2:1]。

Demo Wrapper

::: demo-wrapper title="示例" no-padding height="200px"
<style scoped>
.open-door {
  display: flex;
  gap: 20px;
  padding: 20px;
}
.open-door .main {
  background: #ccc;
}
</style>

<div class="open-door">
  <div class="main">main</div>
  <div class="aside">aside</div>
</div>

:::

效果展示：

示例

main

aside

脚注 可以包含特殊标记
也可以由多个段落组成 ↩︎
脚注文字。 ↩︎ ↩︎
行内脚注文本 ↩︎