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

Tips

This is a tip

Note

This is a warning

Warning

This is a dangerous warning

Details

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";