Markdown 语法

h1-h6 标题

# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

粗体/斜体/删除线

**粗体**
**粗体**

_斜体_
_斜体_

~~删除线~~

列表

无序列表：
- 通过以 + 、 - 或 * 开头的行来创建列表
- 子列表是通过缩进 2 个空格来制作的

有序列表：
1. 使用序列号开始编号
55. 使用偏移量开始编号

任务列表
- [ ] 未完成任务一
- [x] 已完成任务二
- [ ] 未完成任务三

表格

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

代码

- 行内代码：`code`
- 块级代码：```代码内容```

超链接

txt

- 超链接：[文字](https://github.com/nodeca/pica)
- 超链接带文字：[文字](https://github.com/nodeca/pica "超链接hover文字")
- 网址直接转换显示：https://github.com/nodeca/pica

图像

- 图像语法：![图像标题](网址)
- 图像带文字：![图像标题](网址 "图像hover文字")
- 图像带锚点：![图像标题](id)

水平线

分割线：---
星号：***
下划线：___

引用

> 引用内容
>> 引用嵌套
>>> 多层嵌套

kbd

- html语法：<kbd>Ctrl</kbd>
- 插件语法：[[Ctrl]]

排版

输入：(c) (C) (r) (R) (tm)  (TM)  (p) (P) +-
输出：©   ©   ®   ®   ™     ™     (p) (P) ±

输入：!!!!!!  ????  ,,  --  ---
输出：!!!     ???   ,   –   —

输入：test..  test... test..... test?.....  test!....
输出：test…   test…   test…     test?..     test!..

目录表

[[toc]]

自定义容器

::: info 灰色
:::

::: tip 紫色
:::

::: warning 黄色
:::

::: danger 红色
:::

::: details 灰色
:::

GitHub 警报

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

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

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

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

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

表格扩展

多行合并：在行的末尾的添加反斜杠（\），将会与下面的行内容进行整体合并
合并行：：^^ 表示将该单元格和其上面的单元格进行跨行合并
合并列：|| 表示将该单元格右边的那个单元格进行跨列合并
表格标题：在表格最下一行添加 [表格标题内容]，标题将会展示在表格最下面的居中位置上

悬停提示

启用类型悬停：在代码块的语言设置后添加 twoslash 关键字

```ts twoslash
console.log('hello')
//      ^?
```

徽章

<Badge type="info" text="灰色" />
<Badge type="tip" text="紫色" />
<Badge type="warning" text="黄色" />
<Badge type="danger" text="红色" />

上标下标

- 上标sup：19^th^
- 下标sub：H~2~O

ins/mark

- 插入文本 `<ins>`：++插入的文本++
- 标记本文 `<mark>`：==Marked text==

脚注

- 脚注定义：文本[^first].
- 内联脚注定义：文本^[脚注文本] 文本.
- 重复的脚注引用：文本[^second].

[^first]: 脚注文本 **粗体可用**
    可多段落.
[^second]: 脚注文本.

定义列表

标题
  ~ 内容

标题
  ~ 内容
  ~ 内容

缩写

这是 HTML 缩写示例。
*[HTML]: Hyper Text Markup Language

数学

When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$

When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$

emoji

- 经典标记：:wink: :cry: :laughing: :yum:
- 快捷方式：:-) :-( 8-) ;)

语法高亮

使用 Shiki 在 Markdown 代码块中使用彩色文本实现语法高亮。Shiki 支持多种编程语言。需要做的就是将有效的语言别名附加到代码块的开头。在 Shiki 的代码仓库中，可以找到合法的编程语言列表

```js
export default {
  name: 'MyComponent',
  // ...
}
```

行高亮

单行指定：例如 {4}
多个单行指定：例如 {4,7,9}
多行指定：例如 {5-8}、{3-10}、{10-17}
单行与多行均指定：例如 {4,7-13,16,23-27,40}
也可以使用 // [!code highlight] 注释实现行高亮

```js{1,4,6-8}
export default { // Highlighted
  data () {
    return {
      msg: `Highlighted!
      This line isn't highlighted,
      but this and the next 2 are.`,
      motd: 'VitePress is awesome',
      lorem: 'ipsum'
    }
  }
}
```

聚焦代码

在某一行上添加 // [!code focus] 注释将聚焦它并模糊代码的其他部分
此外，可以使用 // [!code focus:<lines>] 定义要聚焦的行数

```js
export default {
  data () {
    return {
      msg: 'Focused!' // [!!code focus]
    }
  }
}
```

颜色差异

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

```js
export default {
  data () {
    return {
      msg: 'Removed' // [!!code --]
      msg: 'Added' // [!!code ++]
    }
  }
}
```

高亮错误和警告

在某一行添加 // [!code warning] 或 // [!code error] 注释将会为该行相应的着色

```js
export default {
  data () {
    return {
      msg: 'Error', // [!!code error]
      msg: 'Warning' // [!!code warning]
    }
  }
}
```

启用行号

可以在代码块中添加 :line-numbers / :no-line-numbers 标记来覆盖在配置中的设置
还可以通过在 :line-numbers 之后添加 = 来自定义起始行号，例如 :line-numbers=2 表示代码块中的行号从 2 开始

```ts
// 默认禁用行号
const line2 = "This is line 2";
const line3 = "This is line 3";
```

```ts:line-numbers {1}
// 启用行号（该案例中还能高亮第一行）
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```

```ts:line-numbers=2 {1}
// 行号已启用，并从 2 开始计数
const line3 = 'This is line 3'
const line4 = 'This is line 4'
```

导入代码片段

可以通过下面的语法来从现有文件中导入代码片段：<<< @/filepath
此语法同时支持行高亮：<<< @/filepath{highlightLines}
也可以像这样在大括号内({})指定语言：例如 <<< @/snippets/snippet.cs{c#}

TIP

@ 的值对应于源代码根目录，默认情况下是 VitePress 项目根目录，除非配置了 srcDir。或者也可以从相对路径导入：<<< ../snippets/snippet.js

导入文件：<<< @/filepath
带行高亮：<<< @/snippets/snippet.js{2}
指定语言：<<< @/snippets/snippet.cs{c#}
指定语言和行高亮：<<< @/snippets/snippet.cs{1,2,4-6 c#}
指定语言、行高亮和行号：<<< @/snippets/snippet.cs{1,2,4-6 c#:line-numbers}

代码组

可以像这样对多个代码块进行分组
也可以在代码组中导入代码片段：

code-group语法中：

<!-- 文件名默认用作标题 -->
<<< @/snippets/snippet.js
<!-- 也可以提供定制的代码组 -->
<<< @/snippets/snippet-with-region.js#snippet{1,2 ts:line-numbers} [snippet with region]

| -- | ||\ |::: code-group|\ |```js [config.js]|\ |const config = {};||\ |export default config;||\ |```||\ | |\ |```ts [config.ts]||\ |import type { UserConfig } from "vitepress";|\ |const config: UserConfig = {};|\ |export default config;|\ |```|\ |:::|\ ||

包含 md 文件

可以像这样在一个 markdown 文件中包含另一个 markdown 文件，甚至是内嵌的
也可以使用 @，它的值对应于源代码根目录，默认情况下是 VitePress 项目根目录，除非配置了 srcDir
它还支持选择行范围：
- 所选行范围的格式可以是：{3,}、 {,10}、{1,10}

# Docs

## Basics

<!--@include: ./parts/basics.md-->

高亮语言

语言	ID	别名
Plain Text	`text`	`txt`、`plain`
显示终端输出	`ansi`
Apache Conf	`apache`
Batch File	`bat`	`batch`
C	`c`
C++	`cpp`	`c++`
CMake	`cmake`
CSS	`css`
CSV	`csv`
Diff	`diff`
Dockerfile	`docker`	`dockerfile`
Go	`go`
HTML	`html`
HTTP	`http`
INI	`ini`	`properties`
Java	`java`
JavaScript	`javascript`	`js`
JSON	`json`
JSX	`jsx`
Kotlin	`kotlin`	`kt` `kts`
LaTeX	`latex`
Less	`less`
Makefile	`make`	`makefile`
Markdown	`markdown`	`md`
MATLAB	`matlab`
MDX	`mdx`
Mermaid	`mermaid`
Nginx	`nginx`
Objective-C	`objective-c`	`objc`
Objective-C++	`objective-cpp`
PL/SQL	`plsql`
PostCSS	`postcss`
PowerShell	`powershell`	`ps` `ps1`
Python	`python`	`py`
Windows Registry Script	`reg`
Sass	`sass`
SCSS	`scss`
Shell	`shellscript`	`bash` `sh` `shell` `zsh`
Shell Session	`shellsession`	`console`
SQL	`sql`
SSH Config	`ssh-config`
Stylus	`stylus`	`styl`
TSX	`tsx`
TypeScript	`typescript`	`ts`
Vim Script	`viml`	`vim` `vimscript`
Vue	`vue`
Vue HTML	`vue-html`
XML	`xml`
YAML	`yaml`	`yml`

Tabs 插件

具有非共享选择状态的选项卡	具有共享选择状态的选项卡
```	```
::: tabs	::: tabs key:ab
== tab a	== tab a
a content	a content
== tab b	== tab b
b content	b content
:::	:::
::: tabs	::: tabs key:ab
== tab a	== tab a
a content 2	a content 2
== tab b	== tab b
b content 2	b content 2
:::	:::
```	```

导入 SVG 图像

html

<script setup>
  import svgGraph from "/svg/demo.svg?raw";
</script>
<svg-image :svg="svgGraph" />

Markdown 语法 ​

h1-h6 标题 ​

粗体/斜体/删除线 ​

列表 ​

表格 ​

代码 ​

超链接 ​

图像 ​

水平线 ​

引用 ​

kbd ​

排版 ​

目录表 ​

自定义容器 ​

GitHub 警报 ​

表格扩展 ​

悬停提示 ​

徽章 ​

上标下标 ​

ins/mark ​

脚注 ​

定义列表 ​

缩写 ​

数学 ​

emoji ​

语法高亮 ​

行高亮 ​

聚焦代码 ​

颜色差异 ​

高亮错误和警告 ​

启用行号 ​

导入代码片段 ​

代码组 ​

包含 md 文件 ​

高亮语言 ​

Tabs 插件 ​

导入 SVG 图像 ​