feat: add demo-wrapper container support

docs/2.preview/主题效果预览.md

@@ -104,6 +104,23 @@ H~2~O
 - twitter - <Iconify name="skill-icons:twitter" size="2em" />
 
 
+**demo wrapper**
+
+::: demo-wrapper
+<style scoped>
+.open-door {
+  display: flex;
+  gap: 20px;
+}
+</style>
+
+<div class="open-door">
+  <div>main</div>
+  <div>aside</div>
+</div>
+
+:::
+
 **代码**
 
 ```js

theme/src/client/styles/md-enhance.scss

@@ -415,3 +415,63 @@
     }
   }
 }
+
+/* --------------------- demo-wrapper ------------------------  */
+
+.plume-content .demo-wrapper {
+  min-height: 40px;
+  margin: 40px -16px;
+  border: solid 1px var(--vp-c-divider);
+  border-radius: 8px;
+  box-shadow: var(--vp-shadow-2);
+
+  .demo-head {
+    display: flex;
+    gap: 5px;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 5px 0 5px 8px;
+    border-bottom: solid 1px var(--vp-c-divider);
+  }
+
+  .demo-head i {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    background: #ccc;
+    border-radius: 100%;
+
+    &:nth-child(1) {
+      background-color: var(--vp-c-danger-3);
+    }
+
+    &:nth-child(2) {
+      background-color: var(--vp-c-warning-3);
+    }
+
+    &:nth-child(3) {
+      background-color: var(--vp-c-green-3);
+    }
+  }
+
+  .demo-container {
+    padding: 10px 20px;
+    background-color: var(--vp-c-bg-alt);
+    border-bottom-right-radius: 8px;
+    border-bottom-left-radius: 8px;
+
+    > :first-of-type {
+      margin-top: 0;
+    }
+
+    > :last-of-type {
+      margin-bottom: 0;
+    }
+  }
+}
+
+@media (min-width: 419px) {
+  .plume-content .demo-wrapper {
+    margin: 40px 0;
+  }
+}

theme/src/node/container.ts

@@ -0,0 +1,14 @@
+import containerPlugin from '@vuepress/plugin-container'
+import type { Plugin } from '@vuepress/core'
+
+export const customContainers: Plugin[] = [
+  containerPlugin({
+    type: 'demo-wrapper',
+    before() {
+      return `<div class="demo-wrapper"><div class="demo-head"><i></i><i></i><i></i></div><div class="demo-container">\n`
+    },
+    after() {
+      return '</div></div>\n'
+    },
+  }),
+]

theme/src/node/plugins.ts

@@ -31,6 +31,7 @@ import { resolveLocaleOptions } from './resolveLocaleOptions.js'
 import { pathJoin } from './utils.js'
 import { resolveNotesList } from './resolveNotesList.js'
 import { resolvedDocsearchOption, resolvedSearchOptions } from './searchPluginOptions.js'
+import { customContainers } from './container.js'
 
 export function setupPlugins(
   app: App,
@@ -88,6 +89,8 @@ export function setupPlugins(
       delay: 200,
       offset: 20,
     }),
+
+    ...customContainers,
   ]
 
   if (options.readingTime !== false)