外观
Markdown扩展语法
提示容器
- 示例 1 （默认标题）：
输入
::: tip
这是一个提示
:::
::: warning
这是一个警告
:::
::: danger
这是一个危险警告
:::
::: info
这是一个信息
:::
::: important
这是一个重要信息
:::
::: note
这是一个备注
:::
::: details [可选标题]
这是一个 details 标签
:::输出
提示
这是一个提示
注意
这是一个警告
警告
这是一个危险警告
相关信息
这是一个信息
重要
这是一个重要信息
注
这是一个备注
详情
这是一个 details 标签
- 示例 2 （自定义标题）：
输入
::: danger STOP
危险区域，禁止通行
:::
::: details 点击查看代码
```ts
console.log('你好，VuePress！')
```
:::输出
STOP
危险区域，禁止通行
点击查看代码
console.log('你好，VuePress！')代码选项卡
输入
::: code-tabs
@tab JavaScript
```js
const name = 'VuePress'
console.log(`你好，${name}！`)
```
@tab TypeScript
```ts
const name: string = 'VuePress'
console.log(`你好，${name}！`)
```
:::输出
JavaScript
const name = 'VuePress'
console.log(`你好，${name}！`)TypeScript
const name: string = 'VuePress'
console.log(`你好，${name}！`)选项卡
输入
::: tabs
@tab 选项卡 1
这是选项卡 1 的内容。
```js
console.log('你好，VuePress!')
```
@tab 选项卡 2
这是选项卡 2 的内容。
- 列表项 1
- 列表项 2
- 列表项 3
:::输出
选项卡 1
这是选项卡 1 的内容。
console.log('你好，VuePress!')选项卡 2
这是选项卡 2 的内容。
- 列表项 1
- 列表项 2
- 列表项 3
特殊符号处理
表格内的 |
当在表格中使用行内代码（inline-code），代码中包含 "|" 符号的时候，例如：
| 第一列 | 第二列 | 第三列 |
|---|---|---|
| ` | ` 的作用有 | 管道符 |
| xx | xx | xx |
点击查看会被 *markdown-it* 错误渲染的源代码
| 第一列 | 第二列 | 第三列 |
| ------------ | ------ | ------ |
| `|` 的作用有 | 管道符 | 逻辑或 |
| xx | xx | xx |通过编译之后，在HTML内显示错误，会把其中的 "|" 符号当成列分隔符，即使已经使用 "`" 行内代码符号扩住两端，所以在这种特殊情况下需要使用 code 标签并进行转义：
| 第一列 | 第二列 | 第三列 |
|---|---|---|
| 的作用有 | 管道符 | 逻辑或 |
| xx | xx | xx |
点击查看可以被正确渲染的源代码
| 第一列 | 第二列 | 第三列 |
| ------------------------ | ------ | ------ |
| <code>\|</code> 的作用有 | 管道符 | 逻辑或 |
| xx | xx | xx |这样就可以HTML就可以正常显示了。