本指南將概述可用于創(chuàng)建文檔的不同設計元素。

#警告

VuePress 提供了一個自定義容器插件來創(chuàng)建警稿框。有四種類型：

• Info：提供中立的信息
• Tip：提供積極和鼓勵的信息
• Warning：提供用戶應該知道的信息，因為存在低到中等
• Danger：供對用戶具有高風險的負面信息

Markdown 范例

::: info
You can find more information at this site.
:::


::: tip
This is a great tip to remember!
:::


::: warning
This is something to be cautious of.
:::


::: danger DANGER
This is something we do not recommend. Use at your own risk.
:::

渲染 Markdown

INFO

你可以在這個網(wǎng)站上找到更多信息。

TIP

這是一個值得記住的好提示！

WARNING

這是需要謹慎的。

DANGER

這是我們不推薦的。使用風險自負。

#代碼塊

VuePress 使用 Prism 提供語言語法高亮顯示，方法是將語言附加到代碼塊的起始反撇號：

Markdown 示例

```js
export default {
  name: 'MyComponent'
}
```

渲染輸出

export default {
  name: 'MyComponent'
}

#行高亮

向代碼塊添加行高亮顯示，需要在大括號中附加行號。

#單行

Markdown 示例

```js{2}
export default {
  name: 'MyComponent',
  props: {
    type: String,
    item: Object
  }
}
```

渲染 Markdown

export default {
  name: 'MyComponent',
  props: {
    type: String,
    item: Object
  }
}

#行組

```js{4-5}
export default {
  name: 'MyComponent',
  props: {
    type: String,
    item: Object
  }
}
```

export default {
  name: 'MyComponent',
  props: {
    type: String,
    item: Object
  }
}

#多個段落

```js{2,4-5}
export default {
  name: 'MyComponent',
  props: {
    type: String,
    item: Object
  }
}
```

export default {
  name: 'MyComponent',
  props: {
    type: String,
    item: Object
  }
}