Markdown与VitePress语法指南

一、Markdown基础语法

1. 标题

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

2. 文本格式化

**粗体文本**
*斜体文本*
***粗斜体文本***
~~删除线文本~~
`行内代码`

粗体文本
斜体文本
粗斜体文本
~~删除线文本~~
行内代码

3. 引用

> 这是一个引用
> 
> > 这是嵌套引用

这是一个引用
这是嵌套引用

4. 分割线

---

5. 列表

无序列表

- 项目1
- 项目2
  - 子项目A
  - 子项目B

项目1
项目2
- 子项目A
- 子项目B

有序列表

1. 第一项
2. 第二项
3. 第三项

第一项
第二项
第三项

任务列表

- [x] 已完成任务
- [ ] 未完成任务

[x] 已完成任务
[ ] 未完成任务

6. 链接

[链接文本](https://example.com "可选标题")

链接文本

7. 图片

![替代文本](图片URL "可选标题")

8. 表格

| 表头1 | 表头2 | 表头3 |
|:-----|:-----:|-----:|
| 左对齐 | 居中 | 右对齐 |
| 内容 | 内容 | 内容 |

表头1	表头2	表头3
左对齐	居中	右对齐
内容	内容	内容

9. 代码块

```语言名称
代码内容
```

javascript

function hello() {
  console.log("Hello, world!");
}

10. 转义字符

\* 星号不会被解析为斜体 \*

* 星号不会被解析为斜体 *

二、VitePress扩展功能

1. 标题锚点标题锚

[点我跳转：基本功能](#基本功能)

点我跳转：基本功能

2. 图片引用图片引用

<!-- 相对路径，目标文件相对于本文章所在位置 -->
![LOGO](./public/logo.png)

<!-- 绝对路径，目标文件就是真实路径在哪 -->
![LOGO](/public/logo.png)

图片引用

3. 链接链接

内部链接引用.md外部链接引用.md

[点我跳转：文章中的基本功能](./markdown.md#基本功能)

[点我跳转：百度](https://www.baidu.com)

内部链接引用点我跳转：文章中的基本功能

外部链接引用点我跳转：百度

4. 多媒体引用多媒体引用

视频引用

<video src="./public/video.mp4" controls></video>

在线视频嵌入

html

<iframe
  style="width: 100%; aspect-ratio: 16/9; margin-top: 2em"
  src="https://www.youtube.com/embed/bzyMLoSwYvk"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen
>
</iframe>

5. Emoji支持 Emoji

:smile: :tada: :100:

😄 🎉 💯

[[toc]]

7. 折叠内容折叠语法

<details>
  <summary>点我展开</summary>
  Markdown默认折叠语法，Vitepress可以使用容器折叠语法，更加美观
</details>

点我展开

Markdown默认折叠语法，Vitepress可以使用容器折叠语法，更加美观

三、VitePress容器

1. 基础容器基础容器

::: info
这是一条info，自定义格式：info+空格+自定义文字
:::

::: tip 提示
这是一个提示，自定义格式：tip+空格+自定义文字
:::

::: warning 警告
这是一条警告，自定义格式：warning+空格+自定义文字
:::

::: danger 危险
这是一个危险警告，自定义格式：danger+空格+自定义文字
:::

::: details 点我查看
这是一条详情，自定义格式：details+空格+自定义文字
:::

重要

这是一条info，自定义格式：info+空格+自定义文字

提示

这是一个提示，自定义格式：tip+空格+自定义文字

警告

这是一条警告，自定义格式：warning+空格+自定义文字

危险

这是一个危险警告，自定义格式：danger+空格+自定义文字

点我查看

这是一条详情，自定义格式：details+空格+自定义文字

2. GitHub风格容器 GitHub风格容器

> [!NOTE] 重要
> 强调用户在快速浏览文档时也不应忽略的重要信息。

> [!TIP]
> 有助于用户更顺利达成目标的建议性信息。

> [!IMPORTANT]
> 对用户达成目标至关重要的信息。

> [!WARNING]
> 因为可能存在风险，所以需要用户立即关注的关键内容。

> [!CAUTION]
> 行为可能带来的负面影响。

重要

强调用户在快速浏览文档时也不应忽略的重要信息。

TIP

有助于用户更顺利达成目标的建议性信息。

IMPORTANT

对用户达成目标至关重要的信息。

WARNING

因为可能存在风险，所以需要用户立即关注的关键内容。

CAUTION

行为可能带来的负面影响。

3. Badge徽标 Badge徽标

* VitePress <Badge type="info" text="info" />
* VitePress <Badge type="tip" text="tip" />
* VitePress <Badge type="warning" text="warning" />
* VitePress <Badge type="danger" text="danger" />

VitePress info
VitePress tip
VitePress warning
VitePress danger

四、VitePress代码块增强

1. 行高亮行高亮

// [!code highlight]

行号语法.md// [!code highlight]语法.md

```ts{2-3,5}
// ...
```

```ts
export default defineConfig({
  lang: 'zh-CN', 
  title: "VitePress", 
  description: "我的vitpress文档教程",
  titleTemplate: '另起标题覆盖title' , 
})
```

输出：

export default defineConfig({
  lang: 'zh-CN',
  title: "VitePress",
  description: "我的vitpress文档教程",
  titleTemplate: '另起标题覆盖title' ,
})

2. 聚焦代码聚焦代码

// [!code focus]
聚焦连续多行，使用 // [!code focus:<lines>]

```ts{4}
export default defineConfig({
  lang: 'zh-CN',
  title: "VitePress",
  description: "我的vitpress文档教程", 
  titleTemplate: '另起标题覆盖title' ,
})
```

3. 增减差异增减差异

在某一行上添加 // [!code --] 或 // [!code ++] 注释将创建该行的差异，同时保留代码块的颜色

export default defineConfig({
  lang: 'zh-CN',
  title: "VitePress",
  description: "我的vitpress文档教程", 
  titleTemplate: '另起标题覆盖title' , 
})

4. 错误和警告错误和警告

在某一行上添加 // [!code warning] 或 // [!code error] 注释会相应地为其着色

export default defineConfig({
  lang: 'zh-CN', 
  title: "VitePress", 
  description: "我的vitpress文档教程",
  titleTemplate: '另起标题覆盖title' ,
})

5. 行号显示行号显示

通过 ts:no-line-numbers 来临时关闭行号

// 左侧不显示行号
export default defineConfig({
  lang: 'zh-CN',
  title: "VitePress",
  description: "我的vitpress文档教程",
  titleTemplate: '另起标题覆盖title' ,
})

// 左侧显示行号
export default defineConfig({
  lang: 'zh-CN',
  title: "VitePress",
  description: "我的vitpress文档教程",
  titleTemplate: '另起标题覆盖title' ,
})

6. 代码组代码组

txt

::: code-group

```sh [pnpm]
#查询pnpm版本
pnpm -v
```

```sh [yarn]
#查询yarn版本
yarn -v
```
:::

pnpmyarn

#查询pnpm版本
pnpm -v

#查询yarn版本
yarn -v

7. 代码块嵌套代码块嵌套

用4个反引号 ```` ，以此类推

````
```
pnpm run docs:dev
```
````

8. 代码块带标题代码块带标题

```objective-c [HelloWorld.mm]
#import <Foundation/Foundation.h>
@interface HelloWorld : NSObject
- (void)sayHello;
@end

@implementation HelloWorld
- (void)sayHello {
    NSLog(@"Hello World !!!");
}
@end
```

HelloWorld.mm

objective-c

#import <Foundation/Foundation.h>
@interface HelloWorld : NSObject
- (void)sayHello;
@end

@implementation HelloWorld
- (void)sayHello {
    NSLog(@"Hello World !!!");
}
@end

Markdown与VitePress语法指南 ​

一、Markdown基础语法 ​

1. 标题 ​

2. 文本格式化 ​

3. 引用 ​

4. 分割线 ​

5. 列表 ​

无序列表 ​

有序列表 ​

任务列表 ​

6. 链接 ​

7. 图片 ​

8. 表格 ​

9. 代码块 ​

10. 转义字符 ​

二、VitePress扩展功能 ​

1. 标题锚点 标题锚 ​

2. 图片引用 图片引用 ​

3. 链接 链接 ​

4. 多媒体引用 多媒体引用 ​

视频引用 ​

在线视频嵌入 ​

5. Emoji支持 Emoji ​

6. 目录生成 目录 ​

7. 折叠内容 折叠语法 ​

三、VitePress容器 ​

1. 基础容器 基础容器 ​

2. GitHub风格容器 GitHub风格容器 ​

3. Badge徽标 Badge徽标 ​

四、VitePress代码块增强 ​

1. 行高亮 行高亮 ​

2. 聚焦代码 聚焦代码 ​

3. 增减差异 增减差异 ​

4. 错误和警告 错误和警告 ​

5. 行号显示 行号显示 ​

6. 代码组 代码组 ​

7. 代码块嵌套 代码块嵌套 ​

8. 代码块带标题 代码块带标题 ​