VuePress Theme QuickSand

The document is only used for theme display, please go to the official site for the latest Vuepress documentation

Markdown

@vuepress/theme-default

Custom Containers

  • Usage:

    ::: <type> [title]
[content]
:::
    1
    2
    3

    The type is required, and the title and content are optional.

    Supported type :

  • Example 1 (default title):

Input

::: tip
This is a tip
:::

::: warning
This is a warning
:::

::: danger
This is a dangerous warning
:::

::: details
This is a details block
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Output

TIP

This is a tip

WARNING

This is a warning

DANGER

This is a dangerous warning

This is a details block

  • Example 2 (custom title):

Input

::: danger STOP
Danger zone, do not proceed
:::

::: details Click me to view the code
```js
console.log('Hello, VuePress!')
```
:::
1
2
3
4
5
6
7
8
9

Output

STOP

Danger zone, do not proceed

Click me to view the code
console.log('Hello, VuePress!')
1
  • Example 3 (code group alias):

Input

:::: code-group
::: code-group-item FOO
```js
const foo = 'foo'
```
:::
::: code-group-item BAR
```js
const bar = 'bar'
```
:::
::::
1
2
3
4
5
6
7
8
9
10
11
12

Output

const foo = 'foo'
1
const bar = 'bar'
1