内置组件

Badge badge

Props:
- type
  - 类型： 'tip' | 'warning' | 'danger'
  - 默认值： 'tip'
- text
  - 类型： string
  - 默认值： ''
- vertical
  - 类型： 'top' | 'middle' | 'bottom' | undefined
  - 默认值： undefined
示例：

输入

- VuePress - <Badge type="tip" text="v2" vertical="top" />
- VuePress - <Badge type="warning" text="v2" vertical="middle" />
- VuePress - <Badge type="danger" text="v2" vertical="bottom" />

输出

VuePress - v2
VuePress - v2
VuePress - v2

CodeGroup

详情：
CodeGroupItem 组件的 Wrapper 。

CodeGroupItem

Props:
- title
  - 类型： string
  - 是否必需： true
- active
  - 类型： boolean
  - 默认值： false
详情：
该组件必须放置在 CodeGroup 组件的内部。
可以通过 active Prop 来设置初始激活的元素。如果不设置，默认激活第一个元素。
示例：

输入

<CodeGroup>
  <CodeGroupItem title="pnpm">

```bash:no-line-numbers
pnpm install
```

  </CodeGroupItem>

  <CodeGroupItem title="yarn">

```bash:no-line-numbers
yarn install
```

  </CodeGroupItem>

  <CodeGroupItem title="npm" active>

```bash:no-line-numbers
npm install
```

  </CodeGroupItem>
</CodeGroup>

输出

pnpm install

yarn install

npm install

注意

你必须在 <CodeGroupItem> 的开始标签和代码块之间添加一个空行，否则代码块无法被 Markdown 正确解析。

所有内容首先都必须是合法的 Markdown ，然后才是一个 Vue SFC 。

或者你可以选择使用自定义容器。