Hint box

Less than 1 minute

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

Settings

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

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        // this is the default option, so you can use it directly
        hint: true,
      },
    },
  }),
});

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

export default {
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        // this is the default option, so you can use it directly
        hint: true,
      },
    },
  }),
};

Demo

Container with default title

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
:::

Customize container title

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

:::

Container without body

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
:::