Demo Container
About 203 wordsLess than 1 minute
2025-10-08
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"
: Titleno-padding
: Remove paddingimg
: Use when containing only imagesheight="xxx"
: Height
Examples
Containing only images:
::: demo-wrapper img no-padding

:::
Output:
Containing markdown syntax:
::: demo-wrapper title="Title"
### Level 3 Heading
This is content inside the demo container.
:::
Output:
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:
This is a heading
This is a paragraph