Hint box

Less than 1 minute

The theme adds tip, note, info, warning, danger and detail hint box.

Settings

Hint box is enabled by default, and we allow you to disable it:

import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    markdown: {
      // disable hint box
      hint: false,
    },
  }),
});

Demo

Important

Important container

Info

Information container

Note

Note container

Tips

Tip container

Warning

Warning container

Caution

Caution container

Details

Details container

::: important
Important container
:::

::: info
Information container
:::

::: note
Note container
:::

::: tip
Tip container
:::

::: warning
Warning container
:::

::: caution
Caution container
:::

::: details
Details container
:::

Custom Title

A custom important container with code, link.

const a = 1;

Custom Title

A custom information container with code, link.

const a = 1;

Custom Title

A custom note container with code, link.

const a = 1;

Custom Title

A custom tip container with code, link.

const a = 1;

Custom Title

A custom warning container with code, link.

const a = 1;

Custom Title

A custom caution container with code, link.

const a = 1;

Custom Title

A custom details container with code, link.

const a = 1;

::: important Custom Title

A custom important container with `code`, [link](#demo).

```js
const a = 1;
```

:::

::: info Custom Title

A custom information container with `code`, [link](#demo).

```js
const a = 1;
```

:::

::: note Custom Title

A custom note container with `code`, [link](#demo).

```js
const a = 1;
```

:::

::: tip Custom Title

A custom tip container with `code`, [link](#demo).

```js
const a = 1;
```

:::

::: warning Custom Title

A custom warning container with `code`, [link](#demo).

```js
const a = 1;
```

:::

::: caution Custom Title

A custom caution container with `code`, [link](#demo).

```js
const a = 1;
```

:::

::: details Custom Title

A custom details container with `code`, [link](#demo).

```js
const a = 1;
```

:::

Custom important

Custom info

Custom note

Custom tip

Custom warning

Custom caution

::: important Custom important
:::

::: info Custom info
:::

::: note Custom note
:::

::: tip Custom tip
:::

::: warning Custom warning
:::

::: caution Custom caution
:::