Custom container

The plugin adds tip, note, info, warning, danger and detail container.

Settings

TS

// .vuepress/config.ts
import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";

export default {
  plugins: [
    mdEnhancePlugin({
      // Enable container
      container: true,
    }),
  ],
};

JS

// .vuepress/config.js
import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";

export default {
  plugins: [
    mdEnhancePlugin({
      // Enable container
      container: true,
    }),
  ],
};

Demo

Container with default title

Info

Information container

Note

Note container

Tips

Tip container

Note

Warning container

Warning

Dangerous container

Details

Details container

::: info
Information container
:::

::: note
Note container
:::

::: tip
Tip container
:::

::: warning
Warning container
:::

::: danger
Dangerous container
:::

::: details
Details container
:::

Customize container title

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 danger container with code, link.

const a = 1;

Custom Title

A custom details container with code, link.

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

:::

::: danger Custom Title

A custom danger 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 info

Custom note

Custom tip

Custom warning

Custom danger

::: info Custom info
:::

::: note Custom note
:::

::: tip Custom tip
:::

::: warning Custom warning
:::

::: danger Custom danger
:::