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

title, createTime, icon, permalink, outline

title	createTime	icon	permalink	outline
示例容器	2024/09/30 14:47:12	icon-park-outline:eyes	/guide/markdown/demo-wrapper/	2

概述

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

语法

::: demo-wrapper
添加你的示例
:::

选项

• title="xxx"：标题
• no-padding：不添加内边距
• img: 仅包含图片时使用
• height="xxx": 高度

示例

仅包含图片:

::: demo-wrapper img no-padding
![hero](/images/custom-hero.jpg)
:::

输出： ::: demo-wrapper img no-padding :::

包含 markdown 语法：

::: demo-wrapper title="标题"
### 三级标题

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

输出： ::: demo-wrapper title="标题"

三级标题

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

包含 html /vue 代码：

::: demo-wrapper
<h1 class="your-demo-title">这是标题</h1>
<p class="your-demo-paragraph">这是段落</p>

<style>
  .your-demo-title {
    color: red;
  }
  .your-demo-paragraph {
    color: blue;
  }
</style>
:::

输出： ::: demo-wrapper

这是标题

这是段落

:::