Markdown

Custom Containers

• Usage:

  ::: <type> [title]
  [content]
  :::
  

  The type is required, and the title and content are optional.

  Supported type :

  • tip
  • warning
  • danger
  • details
  • Alias of CodeGroup and CodeGroupItem:
    • code-group
    • code-group-item

• Example 1 (default title):

Input

::: tip
This is a tip
:::

::: warning
This is a warning
:::

::: danger
This is a dangerous warning
:::

::: details
This is a details block
:::

Output

TIP

This is a tip

WARNING

This is a warning

DANGER

This is a dangerous warning

This is a details block

• Example 2 (custom title):

Input

::: danger STOP
Danger zone, do not proceed
:::

::: details Click me to view the code

```ts
console.log('Hello, VuePress!')
```

:::

Output

STOP

Danger zone, do not proceed

Click me to view the code

console.log('Hello, VuePress!')

• Example 3 (code group alias):

Input

:::: code-group
::: code-group-item FOO

```ts
const foo = 'foo'
```

:::

::: code-group-item BAR

```ts
const bar = 'bar'
```

:::
::::

Output

const foo = 'foo'

const bar = 'bar'