Overview

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

Syntax

::: demo-wrapper
Add your example here
:::

Options

• title="xxx": Title
• no-padding: No padding
• img: Use when only containing an image
• height="xxx": Height

Example

Image only:

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

Output:

Markdown content:

::: demo-wrapper title="Title"
### Third-level heading

This is the content within the demo wrapper.
:::

Output:

Title

Third-level heading

This is the content within the demo wrapper.

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:

This is a title

This is a paragraph

Contributors

zhenghaoyang24pengzhanbo

Changelog

3/27/25, 1:06 PM

View All Changelog

• 9f99a-docs: add en markdown doc (#538)on 3/27/25