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

title, createTime, icon, permalink, outline, badge

title	createTime	icon	permalink	outline	badge
Demo Container	2025/10/08 14:47:12	fxemoji:window	/en/guide/markdown/window/	2	text type Change warning

Overview

Sometimes you may need to supplement your content with examples but want them to be presented separately from other content. The theme supports adding demo containers in Markdown files.

Syntax

::: window
Add your demo here
:::

Options

• title="xxx": Title
• no-padding: Remove padding
• img: Use when containing only images
• height="xxx": Height

Examples

Containing only images:

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

Output: ::: window :::

Containing markdown syntax:

::: window title="Title"
### Level 3 Heading

This is content inside the demo container.
:::

Output: ::: window title="Title"

Level 3 Heading

This is content inside the demo container. :::

Containing HTML/Vue code:

::: window
<h1 class="your-demo-title">This is a heading</h1>
<p class="your-demo-paragraph">This is a paragraph</p>

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

Output: ::: window

This is a heading

This is a paragraph

:::