vuepress-theme-plume/docs/guide/markdown/demo-wrapper.md

title, createTime, icon, permalink, outline, badge

title	createTime	icon	permalink	outline	badge
示例容器	2024/09/30 14:47:12	fxemoji:window	/guide/markdown/window/	2	text type 变更 warning

概述

有时候，你可能需要在 内容中补充一些 示例，但期望能与 其它内容 分隔开来呈现。 主题支持在 Markdown 文件中添加示例窗口容器。

语法

::: window
添加你的示例
:::

选项

• title="xxx"：标题
• height="200px": 高度
• gap="20px": 左右内边距

示例

仅包含图片:

::: window
![hero](/images/custom-hero.jpg)
:::

输出： ::: window :::

包含 markdown 语法：

::: window title="标题"
### 三级标题

这是示例容器中的内容。
:::

输出： ::: window title="标题"

三级标题

这是示例容器中的内容。 :::

包含 html /vue 代码：

::: 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

这是标题

这是段落

:::