mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
100 lines
1.4 KiB
Markdown
100 lines
1.4 KiB
Markdown
---
|
|
title: Tip Containers
|
|
icon: mdi:message-text-outline
|
|
createTime: 2025/11/29 14:53:21
|
|
permalink: /en/guide/markdown/container/
|
|
---
|
|
|
|
::: tip Tip containers help you highlight important information in your documentation, making the content hierarchy clearer.
|
|
:::
|
|
|
|
Tip containers define different information display styles through type, title, and content.
|
|
|
|
## Default Title Styles
|
|
|
|
**Input Example:**
|
|
|
|
```md
|
|
::: note
|
|
This is a note container
|
|
:::
|
|
|
|
::: info
|
|
This is an info container
|
|
:::
|
|
|
|
::: tip
|
|
This is a tip container
|
|
:::
|
|
|
|
::: warning
|
|
This is a warning container
|
|
:::
|
|
|
|
::: caution
|
|
This is a danger warning container
|
|
:::
|
|
|
|
::: details
|
|
This is a details collapsible container
|
|
:::
|
|
```
|
|
|
|
**Actual Effect:**
|
|
|
|
::: note
|
|
This is a note container
|
|
:::
|
|
|
|
::: info
|
|
This is an info container
|
|
:::
|
|
|
|
::: tip
|
|
This is a tip container
|
|
:::
|
|
|
|
::: warning
|
|
This is a warning container
|
|
:::
|
|
|
|
::: caution
|
|
This is a danger warning container
|
|
:::
|
|
|
|
::: details
|
|
This is a details collapsible container
|
|
:::
|
|
|
|
## Custom Title Settings
|
|
|
|
You can easily set custom titles by adding text after the container type.
|
|
|
|
**Input Example:**
|
|
|
|
````md
|
|
::: caution STOP
|
|
Danger zone, do not proceed
|
|
:::
|
|
|
|
::: details Click to view code
|
|
```js
|
|
console.log('Hello, VitePress!')
|
|
```
|
|
:::
|
|
````
|
|
|
|
**Actual Effect:**
|
|
|
|
::: caution STOP
|
|
Danger zone, do not proceed
|
|
:::
|
|
|
|
::: details Click to view code
|
|
|
|
```js
|
|
console.log('Hello, VuePress Plume!')
|
|
```
|
|
|
|
:::
|