看我看我，这里是官网文章写作指导！
概述
Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 HTML 页面。本文详细介绍 Markdown 的基本语法和扩展语法，并提供格式说明与实际效果展示。
基本语法
标题
使用 # 号表示标题，1-6 个 # 分别对应 1-6 级标题。
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题效果展示：
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
粗体
使用 **文字** 或 __文字__ 表示粗体。
**这是粗体**
__这也是粗体__效果展示：
这是粗体
这也是粗体
斜体
使用 *文字* 或 _文字_ 表示斜体。
*这是斜体*
_这也是斜体_效果展示：
这是斜体
这也是斜体
粗体 + 斜体
使用 ***文字*** 或 ___文字___ 表示粗体加斜体。
***粗体加斜体***
___粗体加斜体___效果展示：
粗体加斜体
粗体加斜体
删除线
使用 ~~文字~~ 表示删除线。
~~这是删除线~~效果展示：
这是删除线
引用块
使用 > 号表示引用，可以嵌套使用。
> 这是一个引用块
> 可以写多行
>
> ## 引用块中也可以使用其他格式
> 嵌套引用
>> 二级嵌套效果展示：
这是一个引用块 可以写多行
引用块中也可以使用其他格式
嵌套引用
二级嵌套
有序列表
使用数字加 . 表示有序列表。
1. 第一项
2. 第二项
3. 第三项
1. 也可以这样
1. 数字会自动修正效果展示：
第一项
第二项
第三项
也可以这样
数字会自动修正
无序列表
使用 -、* 或 + 表示无序列表。
- 项目一
- 项目二
- 项目三
* 也可以用星号
* 效果一样
+ 或者加号
+ 都可以效果展示：
- 项目一
- 项目二
- 项目三
- 也可以用星号
- 效果一样
- 或者加号
- 都可以
任务列表
使用 - [ ] 表示未完成任务，- [x] 表示已完成任务。
- [x] 已完成的任务
- [ ] 待完成的任务
- [ ] 第三个任务效果展示：
- 已完成的任务
- 待完成的任务
- 第三个任务
代码
行内代码使用反引号 ` 包裹。
这是一段 `行内代码`，在句子中使用。效果展示：
这是一段 行内代码，在句子中使用。
代码块
使用三个反引号 ``` 包裹代码块，可以指定语言。
```javascript
function hello() {
console.log("Hello World!");
}
```效果展示：
function hello() {
console.log("Hello World!");
}def hello():
print("Hello World!").container {
display: flex;
justify-content: center;
}分隔线
使用三个或以上的 -、*、_ 表示分隔线。
---
***
___效果展示：
链接
[链接文字](https://example.com)
[本地链接](/path/to/page)效果展示：
图片
效果展示：
扩展语法
表格
使用 | 和 - 创建表格，:--、:--:、--: 控制列对齐。
| 左对齐 | 居中 | 右对齐 |
| :--- | :---: | ---: |
| 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 |效果展示：
| 左对齐 | 居中 | 右对齐 |
|---|---|---|
| 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 |
脚注
使用 [^1] 定义脚注，[^1]: 定义脚注内容。
这里有一个脚注[^1]。
[^1]: 这是脚注的内容，会显示在页面底部。效果展示：
这里有一个脚注^1。
标题ID（锚点）
使用 {#自定义ID} 为标题添加自定义锚点。
### 我的标题 {#my-heading}然后可以使用 [跳转](#my-heading) 链接到该标题。
高级技巧
转义字符
如果需要显示特殊字符，使用 \ 转义。
\*这不是斜体\*
\#这不是标题
\`这不是代码`效果展示：
*这不是斜体*
#这不是标题
`这不是代码`
嵌入HTML
Markdown 支持直接嵌入 HTML 标签。
<span style="color: red">红色文字</span>
<div align="center">居中文字</div>效果展示：
红色文字
自定义语法
使用记号笔高亮
配合 VitePress 主题，可以使用记号笔效果（详见 记号笔 教程）：
<span class="marker-text">重点内容</span>
<span class="marker-text-highlight">荧光笔效果</span>
<sapn class="marker-evy">这里是尤雨溪的主页样式，鼠标放在我上面看效果</sapn>效果展示：
重点内容
荧光笔效果
标题徽章
使用 Badge 组件为标题添加状态徽章：
#### 标题 <Badge type="info" text="信息" />
#### 标题 <Badge type="tip" text="提示" />
#### 标题 <Badge type="warning" text="警告" />
#### 标题 <Badge type="danger" text="危险" />效果展示：
标题 信息
标题 提示
标题 警告
标题 危险
参数说明：
| type | 说明 |
|---|---|
| info | 蓝色信息徽章 |
| tip | 绿色提示徽章 |
| warning | 黄色警告徽章 |
| danger | 红色危险徽章 |
链接卡片
使用 Linkcard 组件可以展示美观的外部链接卡片：
<Linkcard url="https://example.com" title="标题" description="描述" logo="logo图片地址"/>参数说明：
| 参数 | 说明 | 是否必填 |
|---|---|---|
| url | 链接地址 | ✅ |
| title | 卡片标题 | ✅ |
| description | 描述文字 | ✅ |
| logo | Logo图片地址 | ✅ |
效果展示：
使用技巧：
- Logo 图片建议使用正方形，80x80 像素效果最佳
- 描述文字可以包含换行，使用
<br>标签
嵌入B站视频
配合 VitePress 主题，可以使用 BiliVideo 组件嵌入 B 站视频：
<BiliVideo bv="BV号" />
<!-- 完整参数示例 -->
<BiliVideo bv="BV1n6UABYEck" :bf="false" :jy="true" />参数说明：
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| bv | B站视频BV号 | string | - |
| bf | BF: 自动播放 | boolean | false |
| jy | JY: 静音播放 | boolean | true |
效果展示：
使用技巧：
- 只填写 BV 号即可：
bv="BV1n6UABYEck" - 自动播放：
bf="true" - 关闭静音：
jy="false"
图片轮播
使用 ImageGallery 组件可以展示图片轮播图：
<ImageGallery :images="[
{ src: '图片1地址.jpg', alt: '图片1' },
{ src: '图片2地址.jpg', alt: '图片2' },
{ src: '图片3地址.jpg', alt: '图片3' }
]" />参数说明：
| 参数 | 说明 | 类型 |
|---|---|---|
| images | 图片数组 | array |
| images[].src | 图片地址（支持本地路径和图链） | string |
| images[].alt | 图片alt文本 | string |
效果展示：
使用技巧：
- 支持本地图片和图链
- 图片会自动缩放填满整个框（object-fit: cover）
- 鼠标放到大图上显示左右箭头，点击切换
- 底部缩略图显示，点击可复制图片链接
文本高亮
使用 <mark> 标签或反引号让文本高亮。
`Teek` 是一款 <mark>轻量 & 简洁高效 & 灵活配置</mark>的 VitePress 主题。效果展示：
Teek 是一款 轻量 & 简洁高效 & 灵活配置的 VitePress 主题。
内置徽章
使用 Badge 组件为内容添加徽章。
<Badge text="标签" />
<Badge text="提示" type="info" />
<Badge text="警告" type="warning" />
<Badge text="危险" type="danger" />效果展示：
标签提示警告危险自定义容器
使用 ::: 语法创建自定义容器。
默认标题：
::: note
This is an note box.
:::
::: info
This is an info box.
:::
::: tip
This is a tip.
:::
::: warning
This is a warning.
:::
::: danger
This is a dangerous warning.
:::
::: details
This is a details block.
:::
::: center
Markdown 拓展
:::
::: tip 摘要
很久之前，我决定踏上的这条路，映照了我与未来的因果。
::: right
2021-11-13 @Teek
:::效果展示：
NOTE
This is an note box.
信息
This is an info box.
提示
This is a tip.
警告
This is a warning.
危险
This is a dangerous warning.
详细信息
This is a details block.
Markdown 拓展
摘要
很久之前，我决定踏上的这条路，映照了我与未来的因果。
2021-11-13 @Teek
自定义标题：
::: danger STOP
危险区域，请勿继续
:::
::: details 点我查看代码
```js
console.log("Hello, VitePress!");STOP
危险区域，请勿继续
点我查看代码
console.log("Hello, VitePress!");GitHub 风格的警报
类似 GitHub 的警报语法。
> [!NOTE]
> 这是 Note 类型的提示
> [!TIP]
> 这是 TIP 类型的提示
> [!WARNING]
> 这是 WARNING 类型的提示
> [!CAUTION]
> 这是 CAUTION 类型的提示效果展示：
NOTE
这是 Note 类型的提示
TIP
这是 TIP 类型的提示
WARNING
这是 WARNING 类型的提示
CAUTION
这是 CAUTION 类型的提示
目录表 (TOC)
在页面中显示目录结构。
[[toc]]效果展示：
在代码块中实现行高亮
在代码块中指定行号进行高亮。
```js{4}
export default {
name: 'test',
props: {
type: String,
length: Number
}
}
```效果展示：
export default {
name: 'test',
props: {
type: String,
length: Number
}
}代码块中聚焦
使用 // [!code focus] 注释聚焦代码。
```js
export default {
// [!code focus]
name: 'test'
}
```效果展示：
export default {
name: 'test'
}代码块中的颜色差异
使用 // [!code --] 和 // [!code ++] 标记删除和新增的代码。
```js
export default {
name: 'test',
// [!code --]
oldProp: String,
// [!code ++]
newProp: Number
}
```效果展示：
export default {
name: 'test',
oldProp: String,
newProp: Number
}高亮"错误"和"警告"
使用 // [!code warning] 和 // [!code error] 高亮警告和错误。
```js
// [!code warning]
console.warn('这是一个警告')
// [!code error]
throw new Error('这是一个错误')
```效果展示：
console.warn('这是一个警告')
throw new Error('这是一个错误')行号
在代码块中显示行号。
```js{1}
export default {
name: 'test',
age: 18
}
```效果展示：
export default {
name: 'test',
age: 18
}代码组
将多个代码块组合在一起，通过标签切换显示。
```bash
echo "Hello"
```
```js
console.log("Hello")
```
:::效果展示：
echo "Hello"console.log("Hello")