vuepress-theme-plume/docs/notes/theme/guide/代码/代码组.md

---
title: 代码组
author: pengzhanbo
icon: fluent:group-list-20-filled
createTime: 2024/04/04 10:36:59
permalink: /guide/code/group/
---

## 语法

可以像这样对多个代码块进行分组：

**输入：**

````md
::: code-tabs
@tab config.js
```js
/**
 * @type {import('vuepress').UserConfig}
 */
const config = {
  // ..
}

export default config
```

@tab config.ts
```ts
import type { UserConfig } from 'vuepress'

const config: UserConfig = {
  // ..
}

export default config
```
:::
````

**输出：**

::: code-tabs
@tab config.js

```js
/**
 * @type {import('vuepress').UserConfig}
 */
const config = {
  // ..
}

export default config
```

@tab config.ts

```ts
import type { UserConfig } from 'vuepress'

const config: UserConfig = {
  // ..
}

export default config
```

:::

你还可以通过 `@tab:active` 选择其中一个代码块作为默认显示的代码块。