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

title, createTime, icon, permalink, outline

title	createTime	icon	permalink	outline
Demo Container	2025/10/08 14:47:12	icon-park-outline:eyes	/en/guide/markdown/demo-wrapper/	2

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

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

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

Output: ::: demo-wrapper img no-padding :::

Containing markdown syntax:

::: demo-wrapper title="Title"
### Level 3 Heading

This is content inside the demo container.
:::

Output: ::: demo-wrapper title="Title"

Level 3 Heading

This is content inside the demo container. :::

Containing HTML/Vue code:

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

This is a heading

This is a paragraph

:::