98 lines
1.3 KiB
Markdown
98 lines
1.3 KiB
Markdown
---
|
|
title: 示例容器
|
|
createTime: 2024/09/30 14:47:12
|
|
icon: fxemoji:window
|
|
permalink: /guide/markdown/window/
|
|
outline: 2
|
|
badge:
|
|
text: 变更
|
|
type: warning
|
|
---
|
|
|
|
## 概述
|
|
|
|
有时候，你可能需要在 内容中补充一些 示例，但期望能与 其它内容 分隔开来呈现。
|
|
主题支持在 Markdown 文件中添加示例窗口容器。
|
|
|
|
## 语法
|
|
|
|
````md
|
|
::: window
|
|
添加你的示例
|
|
:::
|
|
````
|
|
|
|
## 选项
|
|
|
|
- `title="xxx"`：标题
|
|
- `height="200px"`: 高度
|
|
- `gap="20px"`: 左右内边距
|
|
|
|
## 示例
|
|
|
|
仅包含图片:
|
|
|
|
```md
|
|
::: window
|
|
|
|
:::
|
|
```
|
|
|
|
**输出：**
|
|
::: window
|
|
|
|
:::
|
|
|
|
包含 markdown 语法：
|
|
|
|
```md
|
|
::: window title="标题"
|
|
### 三级标题
|
|
|
|
这是示例容器中的内容。
|
|
:::
|
|
```
|
|
|
|
**输出：**
|
|
::: window title="标题"
|
|
|
|
### 三级标题
|
|
|
|
这是示例容器中的内容。
|
|
:::
|
|
|
|
包含 html /vue 代码：
|
|
|
|
```md
|
|
::: window
|
|
<h2 class="your-demo-title">这是标题</h2>
|
|
<p class="your-demo-paragraph">这是段落</p>
|
|
|
|
<style>
|
|
.your-demo-title {
|
|
color: red;
|
|
}
|
|
.your-demo-paragraph {
|
|
color: blue;
|
|
}
|
|
</style>
|
|
:::
|
|
```
|
|
|
|
**输出：**
|
|
::: window
|
|
|
|
<h2 class="your-demo-title">这是标题</h2>
|
|
<p class="your-demo-paragraph">这是段落</p>
|
|
|
|
<style>
|
|
.your-demo-title {
|
|
color: red !important;
|
|
}
|
|
.your-demo-paragraph {
|
|
color: blue !important;
|
|
}
|
|
</style>
|
|
|
|
:::
|