Markdown

@vuepress/theme-default

Hint Containers

  • Example 1 (default title):

Input

::: tip
This is a tip
:::

::: warning
This is a warning
:::

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

::: info
This is an information.
:::

::: important
This is an important message
:::

::: note
This is a note
:::

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

Output

Tips

This is a tip

Warning

This is a warning

Caution

This is a dangerous warning

Info

This is an information.

Important

This is an important message

Note

This is a note

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!')

Code Tabs

Input

::: code-tabs

@tab JavaScript

```js
const name = 'VuePress'
console.log(`Hello, ${name}!`)
```

@tab TypeScript

```ts
const name: string = 'VuePress'

console.log(`Hello, ${name}!`)
```

:::

Output

JavaScript
const name = 'VuePress'
console.log(`Hello, ${name}!`)

Tabs

Input

::: tabs

@tab Tab1

This is the content of Tab1.

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

@tab Tab2

This is the content of Tab2.

- List item 1
- List item 2
- List item 3

:::

Output

Tab1

This is the content of Tab1.

console.log('Hello, VuePress!')