fes.js/docs/reference/default-theme/markdown.md

Markdown

Custom Containers

• Usage:

  ::: <type> [title]
  [content]
  :::
  

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

  Supported type :

  • tip
  • warning
  • danger
  • details
  • Alias of CodeGroup and CodeGroupItem:
    • code-group
    • code-group-item

• 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, which does not work in IE / Edge
:::

Output

::: tip This is a tip :::

::: warning This is a warning :::

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

::: details This is a details block, which does not work in IE / Edge :::

• Example 2 (custom title):

Input

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

::: details Click me to view the code
```js
console.log('Hello, VuePress!')
```
:::

Output

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

::: details Click me to view the code

console.log('Hello, VuePress!')

:::

• Example 3 (code group alias):

Input

:::: code-group
::: code-group-item FOO
```js
const foo = 'foo'
```
:::
::: code-group-item BAR
```js
const bar = 'bar'
```
:::
::::

Output

:::: code-group ::: code-group-item FOO

const foo = 'foo'

::: ::: code-group-item BAR

const bar = 'bar'

::: ::::