Пользовательский контейнер

Тема добавляет подсказку, примечание, информацию, предупреждение, опасность и контейнер с подробностями.

Конфиг

TS

// .vuepress/config.ts
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
        container: true,
      },
    },
  }),
});

JS

// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";

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

Демо

Инфо

Контейнер с информацией

Заметка

Контейнер с примечанием

Совет

Контейнер с советом

Примечание

Контейнер с предупреждением

Предупреждение

Контейнер с опасностью

Подробности

Контейнер с деталями

Пользовательский заголовок

Пользовательский информационный контейнер с code, ссылка.

const a = 1;

Пользовательский заголовок

Пользовательский контейнер для заметок с code, ссылка.

const a = 1;

Пользовательский заголовок

Пользовательский контейнер подсказки с code, ссылка.

const a = 1;

Пользовательский заголовок

Пользовательский контейнер с предупреждением с code, ссылка.

const a = 1;

Пользовательский заголовок

Пользовательский контейнер опасности с code, ссылка.

const a = 1;

Пользовательский заголовок

Пользовательский контейнер с деталями с code, ссылка.

const a = 1;

Пользовательская информация

Пользовательская заметка

Пользовательский совет

Пользовательское предупреждение

Пользовательская опасность

::: info
Контейнер с информацией
:::

::: note
Контейнер с примечанием
:::

::: tip
Контейнер с советом
:::

::: warning
Контейнер с предупреждением
:::

::: caution
Контейнер с опасностью
:::

::: details
Details container
:::

::: info Пользовательский заголовок

Пользовательский информационный контейнер с `code`, [ссылка](#демо).

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

:::

::: note Пользовательский заголовок
Пользовательский контейнер для заметок с `code`, [ссылка](#демо).

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

:::

::: tip Пользовательский заголовок

Пользовательский контейнер подсказки с `code`, [ссылка](#демо).

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

:::

::: warning Пользовательский заголовок

Пользовательский контейнер с предупреждением с `code`, [ссылка](#демо).

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

:::

::: caution Пользовательский заголовок

Пользовательский контейнер опасности с `code`, [ссылка](#демо).

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

:::

::: details Пользовательский заголовок

Пользовательский контейнер с деталями с `code`, [ссылка](#демо).

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

:::

::: info Пользовательская информация
:::

::: note Пользовательская заметка
:::

::: tip Пользовательский совет
:::

::: warning Пользовательское предупреждение
:::

::: caution Пользовательская опасность
:::