Hint box

Less than 1 minute

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

Settings

import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";

export default {
  plugins: [
    mdEnhancePlugin({
      // Enable hint box
      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
:::