vuepress-plugin-md-power 1.0.0-rc.125 → 1.0.0-rc.127

package/lib/client/components/ArtPlayer.vue

@@ -157,4 +157,44 @@ onUnmounted(() => {
     transition: box-shadow var(--vp-t-color);
   }
 }
+
+.vp-artplayer .art-video-player .art-subtitle {
+  z-index: 12;
+}
+
+.vp-artplayer .art-video-player .art-danmuku {
+  z-index: 13;
+}
+
+.vp-artplayer .art-video-player .art-layers {
+  z-index: 14;
+}
+
+.vp-artplayer .art-video-player .art-mask {
+  z-index: 15;
+}
+
+.vp-artplayer .art-video-player .art-bottom {
+  z-index: 16;
+}
+
+.vp-artplayer .art-video-player .art-loading {
+  z-index: 17;
+}
+
+.vp-artplayer .art-video-player .art-notice {
+  z-index: 18;
+}
+
+.vp-artplayer .art-video-player .art-settings {
+  z-index: 19;
+}
+
+.vp-artplayer .art-video-player .art-info {
+  z-index: 20;
+}
+
+.vp-artplayer .art-video-player .art-contextmenu {
+  z-index: 21;
+}
 </style>

package/lib/client/components/Tabs.vue

@@ -202,11 +202,11 @@ function onTabNavClick(index: number): void {
   padding: 16px;
 }
 
-.vp-doc .vp-tab :nth-child(2) {
+.vp-doc .vp-tab > :nth-child(2) {
   margin-top: 0;
 }
 
-.vp-doc .vp-tab :last-child {
+.vp-doc .vp-tab > :last-child {
   margin-bottom: 0;
 }
 

package/lib/client/components/VPDemoBasic.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import '../styles/demo.css'
+
+const props = defineProps<{
+  type?: 'vue' | 'markdown'
+  title?: string
+  desc?: string
+  expanded?: boolean
+}>()
+
+const showCode = ref(props.expanded ?? true)
+function toggleCode() {
+  showCode.value = !showCode.value
+}
+</script>
+
+<template>
+  <div class="vp-demo-wrapper">
+    <div class="demo-draw">
+      <slot />
+    </div>
+    <div v-if="title || desc" class="demo-info">
+      <p v-if="title" class="title">
+        {{ title }}
+      </p>
+      <p v-if="desc" class="desc">
+        {{ desc }}
+      </p>
+    </div>
+    <div class="demo-ctrl">
+      <span class="vpi-demo-code" @click="toggleCode" />
+    </div>
+    <div v-show="showCode" class="demo-code">
+      <slot name="code" />
+    </div>
+  </div>
+</template>

package/lib/client/components/VPDemoNormal.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { onClickOutside } from '@vueuse/core'
+import { computed, onMounted, ref, useId, useTemplateRef, watch } from 'vue'
+import { loadScript, loadStyle } from '../utils/shared.js'
+import Loading from './icons/Loading.vue'
+
+import '../styles/demo.css'
+
+const props = defineProps<{
+  title?: string
+  desc?: string
+  expanded?: boolean
+  config?: {
+    html: string
+    css: string
+    script: string
+    jsLib: string[]
+    cssLib: string[]
+  }
+}>()
+
+const draw = useTemplateRef<HTMLDivElement>('draw')
+const id = useId()
+const loaded = ref(true)
+
+const resourcesEl = useTemplateRef<HTMLDivElement>('resourcesEl')
+const resources = computed<{
+  name: string
+  items: { name: string, url: string }[]
+}[]>(() => {
+  if (!props.config)
+    return []
+  return [
+    { name: 'JavaScript', items: props.config.jsLib.map(url => ({ name: normalizeName(url), url })) },
+    { name: 'CSS', items: props.config.cssLib.map(url => ({ name: normalizeName(url), url })) },
+  ].filter(i => i.items.length)
+})
+
+function normalizeName(url: string) {
+  return url.slice(url.lastIndexOf('/') + 1)
+}
+
+const showResources = ref(false)
+
+function toggleResources() {
+  showResources.value = !showResources.value
+}
+
+onClickOutside(resourcesEl, () => {
+  showResources.value = false
+})
+
+onMounted(() => {
+  if (!draw.value)
+    return
+  const root = draw.value.attachShadow({ mode: 'open' })
+
+  watch(() => props.config, async () => {
+    root.innerHTML = props.config?.html ?? ''
+
+    props.config?.cssLib?.forEach(url => loadStyle(url, root))
+    if (props.config?.css) {
+      const style = document.createElement('style')
+      style.innerHTML = props.config?.css ?? ''
+      root.appendChild(style)
+    }
+
+    if (props.config?.jsLib?.length) {
+      loaded.value = false
+      await Promise.all(props.config.jsLib.map(url => loadScript(url)))
+        .catch(e => console.warn(e))
+      loaded.value = true
+    }
+
+    if (props.config?.script) {
+      const script = document.createElement('script')
+      script.type = 'text/javascript'
+      script.innerHTML = `;(function(document){\n${props.config.script}\n})(document.querySelector('#VPDemoNormalDraw${id}').shadowRoot);`
+      root.appendChild(script)
+    }
+  }, { immediate: true })
+})
+
+const fence = useTemplateRef<HTMLDivElement>('fence')
+const data = ref<{
+  js: string
+  css: string
+  html: string
+  jsType: string
+  cssType: string
+}>({ js: '', css: '', html: '', jsType: '', cssType: '' })
+
+onMounted(() => {
+  if (!fence.value)
+    return
+
+  data.value.html = props.config?.html ?? ''
+  const els = Array.from(fence.value.querySelectorAll('div[class*="language-"]'))
+  for (const el of els) {
+    const lang = el.className.match(/language-(\w+)/)?.[1] ?? ''
+    const content = el.querySelector('pre')?.textContent ?? ''
+    if (lang === 'js' || lang === 'javascript') {
+      data.value.js = content
+      data.value.jsType = 'js'
+    }
+    if (lang === 'ts' || lang === 'typescript') {
+      data.value.js = content
+      data.value.jsType = 'ts'
+    }
+    if (lang === 'css' || lang === 'scss' || lang === 'less' || lang === 'stylus' || lang === 'styl') {
+      data.value.css = content
+      data.value.cssType = lang === 'styl' ? 'stylus' : lang
+    }
+  }
+})
+
+const showCode = ref(props.expanded ?? false)
+function toggleCode() {
+  showCode.value = !showCode.value
+}
+</script>
+
+<template>
+  <div class="vp-demo-wrapper normal">
+    <div class="demo-draw">
+      <Loading v-if="!loaded" />
+      <div :id="`VPDemoNormalDraw${id}`" ref="draw" />
+    </div>
+    <div v-if="title || desc" class="demo-info">
+      <p v-if="title" class="title">
+        {{ title }}
+      </p>
+      <p v-if="desc" class="desc">
+        {{ desc }}
+      </p>
+    </div>
+    <div class="demo-ctrl">
+      <div class="extra">
+        <form action="https://codepen.io/pen/define" method="POST" target="_blank" enctype="application/x-www-form-urlencoded;charset=utf-8">
+          <input
+            type="hidden" name="data" :value="JSON.stringify({
+              title: title || 'Demo',
+              description: desc || '',
+              html: data.html,
+              css: data.css,
+              js: data.js,
+              js_pre_processor: data.jsType === 'ts' ? 'typescript' : 'none',
+              css_pre_processor: data.cssType,
+              css_external: config?.cssLib?.join(';'),
+              js_external: config?.jsLib?.join(';'),
+            })"
+          >
+          <button type="submit" title="CodePen" aria-label="CodePen">
+            <span class="vpi-demo-codepen" />
+          </button>
+        </form>
+        <form action="https://jsfiddle.net/api/post/library/pure/" method="POST" target="_blank" enctype="application/x-www-form-urlencoded;charset=UTF-8" accept-charset="UTF-8">
+          <button type="submit" title="jsFiddle" aria-label="jsFiddle">
+            <span class="vpi-demo-jsfiddle bg" />
+          </button>
+          <input type="hidden" name="wrap" value="b">
+          <input type="hidden" name="html" :value="data.html">
+          <input type="hidden" name="js" :value="data.js">
+          <input type="hidden" name="css" :value="data.cssType === 'scss' || data.cssType === 'css' ? data.css : config?.css || ''">
+          <input type="hidden" name="panel_css" :value="data.cssType === 'scss' ? 1 : 0">
+          <input type="hidden" name="panel_js" :value="data.jsType === 'ts' ? 4 : 0">
+          <input type="hidden" name="title" :value="title || 'Demo'">
+          <input type="hidden" name="description" :value="desc || ''">
+          <input type="hidden" name="resources" :value="[...(config?.jsLib || []), ...(config?.cssLib || [])].join(',')">
+        </form>
+      </div>
+      <div v-if="resources.length" class="demo-resources">
+        <span ref="resourcesEl" class="vpi-demo-resources" title="Resources" aria-label="Resources" @click="toggleResources" />
+        <Transition name="fade">
+          <div v-show="showResources" class="demo-resources-container">
+            <div v-for="{ name, items } in resources" :key="name" class="demo-resources-list">
+              <p>{{ name }}</p>
+              <ul v-for="item in items" :key="item.url">
+                <li>
+                  <a :href="item.url" target="_blank" rel="noopener noreferrer" class="no-icon" aria-label="{{ item.name }}">{{ item.name }}</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </Transition>
+      </div>
+      <span class="vpi-demo-code" @click="toggleCode" />
+    </div>
+    <div v-show="showCode" ref="fence" class="demo-code">
+      <slot />
+    </div>
+  </div>
+</template>

package/lib/client/styles/demo.css

@@ -0,0 +1,157 @@
+.vp-demo-wrapper {
+  margin: 16px 0;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  transition: border-color var(--vp-t-color);
+}
+
+.vp-demo-wrapper .demo-draw {
+  padding: 24px;
+}
+
+.vp-demo-wrapper .demo-info .title {
+  display: flex;
+  align-items: center;
+  margin-top: 0;
+  margin-bottom: 8px;
+  font-size: 18px;
+  font-weight: bolder;
+}
+
+.vp-demo-wrapper .demo-info .title::before {
+  display: inline-block;
+  width: 16px;
+  height: 0;
+  margin-right: 8px;
+  content: "";
+  border-top: 1px solid var(--vp-c-divider);
+  transition: border-color var(--vp-t-color);
+}
+
+.vp-demo-wrapper .demo-info .title::after {
+  display: inline-block;
+  flex: 1;
+  height: 0;
+  margin-left: 8px;
+  content: "";
+  border-top: 1px solid var(--vp-c-divider);
+  transition: border-color var(--vp-t-color);
+}
+
+.vp-demo-wrapper .demo-info .desc {
+  padding: 0 24px;
+  margin-top: 8px;
+}
+
+.vp-demo-wrapper .demo-info p:last-child {
+  margin-bottom: 16px;
+}
+
+.vp-demo-wrapper .demo-ctrl {
+  display: flex;
+  gap: 16px;
+  justify-content: flex-end;
+  padding: 8px 24px;
+  border-top: 1px dotted var(--vp-c-divider);
+  transition: border-color var(--vp-t-color);
+}
+
+.vp-demo-wrapper .demo-ctrl .extra {
+  display: flex;
+  flex: 1;
+  gap: 16px;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.vp-demo-wrapper .demo-ctrl [class*="vpi-"] {
+  font-size: 20px;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  transition: color var(--vp-t-color);
+}
+
+.vp-demo-wrapper .demo-ctrl [class*="vpi-"]:hover {
+  color: var(--vp-c-text-1);
+}
+
+.vp-demo-wrapper .demo-ctrl form,
+.vp-demo-wrapper .demo-ctrl button {
+  padding: 0;
+  margin: 0;
+  line-height: 1;
+}
+
+.vp-demo-wrapper .demo-resources {
+  position: relative;
+}
+
+.vp-demo-wrapper .demo-code {
+  border-top: 1px solid var(--vp-c-divider);
+  transition: border-color var(--vp-t-color);
+}
+
+.vp-demo-wrapper .demo-code div[class*="language-"],
+.vp-demo-wrapper .demo-code .vp-code-tabs-nav {
+  margin: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.vp-demo-wrapper .demo-code > div[class*="language-"]:not(:last-of-type) {
+  border-bottom: 2px dotted var(--vp-c-divider);
+  border-radius: 0;
+}
+
+.vp-demo-wrapper .demo-code > div[class*="language-"] + div[class*="language-"] {
+  margin-top: 0;
+}
+
+.vp-demo-wrapper .demo-resources-container {
+  position: absolute;
+  top: 100%;
+  right: -24px;
+  z-index: 10;
+  width: max-content;
+  padding: 8px 12px;
+  font-size: 14px;
+  background-color: var(--vp-c-bg);
+  border: solid 1px var(--vp-c-divider);
+  border-radius: 8px;
+  box-shadow: var(--vp-shadow-2);
+  transition: var(--vp-t-color);
+  transition-property: border, box-shadow, background-color;
+}
+
+.vp-demo-wrapper .demo-resources-container .demo-resources-list > p {
+  margin: 0;
+  line-height: 20px;
+  color: var(--vp-c-text-3);
+  transition: color var(--vp-t-color);
+}
+
+.vp-demo-wrapper .demo-resources-container .demo-resources-list:not(:first-of-type) {
+  margin-top: 8px;
+}
+
+.vp-demo-wrapper .demo-resources-container .demo-resources-list ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.vpi-demo-code {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14.18 4.276a.75.75 0 0 1 .531.918l-3.973 14.83a.75.75 0 0 1-1.45-.389l3.974-14.83a.75.75 0 0 1 .919-.53m2.262 3.053a.75.75 0 0 1 1.059-.056l1.737 1.564c.737.662 1.347 1.212 1.767 1.71c.44.525.754 1.088.754 1.784c0 .695-.313 1.258-.754 1.782c-.42.499-1.03 1.049-1.767 1.711l-1.737 1.564a.75.75 0 0 1-1.004-1.115l1.697-1.527c.788-.709 1.319-1.19 1.663-1.598c.33-.393.402-.622.402-.818s-.072-.424-.402-.817c-.344-.409-.875-.89-1.663-1.598l-1.697-1.527a.75.75 0 0 1-.056-1.06m-8.94 1.06a.75.75 0 1 0-1.004-1.115L4.761 8.836c-.737.662-1.347 1.212-1.767 1.71c-.44.525-.754 1.088-.754 1.784c0 .695.313 1.258.754 1.782c.42.499 1.03 1.049 1.767 1.711l1.737 1.564a.75.75 0 0 0 1.004-1.115l-1.697-1.527c-.788-.709-1.319-1.19-1.663-1.598c-.33-.393-.402-.622-.402-.818s.072-.424.402-.817c.344-.409.875-.89 1.663-1.598z'/%3E%3C/svg%3E");
+}
+
+.vpi-demo-codepen {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1024' height='1024' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23000' d='m911.7 385.3l-.3-1.5c-.2-1-.3-1.9-.6-2.9c-.2-.6-.4-1.1-.5-1.7c-.3-.8-.5-1.7-.9-2.5c-.2-.6-.5-1.1-.8-1.7c-.4-.8-.8-1.5-1.2-2.3c-.3-.5-.6-1.1-1-1.6c-.8-1.2-1.7-2.4-2.6-3.6c-.5-.6-1.1-1.3-1.7-1.9c-.4-.5-.9-.9-1.4-1.3c-.6-.6-1.3-1.1-1.9-1.6c-.5-.4-1-.8-1.6-1.2c-.2-.1-.4-.3-.6-.4L531.1 117.8a34.3 34.3 0 0 0-38.1 0L127.3 361.3c-.2.1-.4.3-.6.4c-.5.4-1 .8-1.6 1.2c-.7.5-1.3 1.1-1.9 1.6c-.5.4-.9.9-1.4 1.3c-.6.6-1.2 1.2-1.7 1.9c-1 1.1-1.8 2.3-2.6 3.6c-.3.5-.7 1-1 1.6c-.4.7-.8 1.5-1.2 2.3c-.3.5-.5 1.1-.8 1.7c-.3.8-.6 1.7-.9 2.5c-.2.6-.4 1.1-.5 1.7c-.2.9-.4 1.9-.6 2.9l-.3 1.5q-.3 2.25-.3 4.5v243.5q0 2.25.3 4.5l.3 1.5l.6 2.9c.2.6.3 1.1.5 1.7c.3.9.6 1.7.9 2.5c.2.6.5 1.1.8 1.7c.4.8.7 1.5 1.2 2.3c.3.5.6 1.1 1 1.6c.5.7.9 1.4 1.5 2.1l1.2 1.5c.5.6 1.1 1.3 1.7 1.9c.4.5.9.9 1.4 1.3c.6.6 1.3 1.1 1.9 1.6c.5.4 1 .8 1.6 1.2c.2.1.4.3.6.4L493 905.7c5.6 3.8 12.3 5.8 19.1 5.8c6.6 0 13.3-1.9 19.1-5.8l365.6-243.5c.2-.1.4-.3.6-.4c.5-.4 1-.8 1.6-1.2c.7-.5 1.3-1.1 1.9-1.6c.5-.4.9-.9 1.4-1.3c.6-.6 1.2-1.2 1.7-1.9l1.2-1.5l1.5-2.1c.3-.5.7-1 1-1.6c.4-.8.8-1.5 1.2-2.3c.3-.5.5-1.1.8-1.7c.3-.8.6-1.7.9-2.5c.2-.5.4-1.1.5-1.7c.3-.9.4-1.9.6-2.9l.3-1.5q.3-2.25.3-4.5V389.8c-.3-1.5-.4-3-.6-4.5M546.4 210.5l269.4 179.4l-120.3 80.4l-149-99.6V210.5zm-68.8 0v160.2l-149 99.6l-120.3-80.4zM180.7 454.1l86 57.5l-86 57.5zm296.9 358.5L208.3 633.2l120.3-80.4l149 99.6zM512 592.8l-121.6-81.2L512 430.3l121.6 81.2zm34.4 219.8V652.4l149-99.6l120.3 80.4zM843.3 569l-86-57.5l86-57.5z'/%3E%3C/svg%3E");
+}
+
+.vpi-demo-jsfiddle {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='180' viewBox='0 0 256 180'%3E%3Cpath fill='%230084ff' d='M148.1 0c42.8 0 77.598 34.087 78.393 76.452l.014 1.481l-.011.866l1.46.76c16.183 8.773 26.938 25.332 27.964 44.018l.061 1.52l.019 1.418c0 29.117-23.397 52.75-52.428 53.295l-1.365.008H54.053C24.094 179.357 0 155.102 0 125.276c0-17.387 8.273-33.328 21.838-43.511l1.287-.938l.271-.19l-.135-.684a39 39 0 0 1-.438-3.347l-.11-1.694l-.037-1.705c0-21.519 17.547-38.95 39.173-38.95a39 39 0 0 1 16.063 3.445l1.483.706l.915.478l.978-1.623A78.37 78.37 0 0 1 144.718.072l1.721-.055zm0 11.13a67.24 67.24 0 0 0-60.69 38.113c-1.53 3.187-5.607 4.157-8.41 2c-4.908-3.776-10.875-5.856-17.151-5.856c-15.495 0-28.043 12.465-28.043 27.82c0 2.852.43 5.638 1.261 8.27a5.565 5.565 0 0 1-2.473 6.468c-13.215 7.815-21.464 21.854-21.464 37.33c0 23.308 18.526 42.367 41.76 43.376l1.249.038h148.103c23.526.144 42.628-18.783 42.628-42.174c0-17.244-10.49-32.572-26.266-39.1a5.57 5.57 0 0 1-3.43-4.87l.002-.586l.15-2.415l.047-1.246l-.012-1.798c-.768-36.225-30.578-65.37-67.262-65.37m16.167 70.493c17.519 0 31.876 13.362 31.876 30.052s-14.357 30.053-31.876 30.053c-10.548 0-19.386-5.284-31.203-16.729l-2.58-2.547l-3.436-3.525q-6.525-6.955-6.774-7.468l-1.321-1.363l-2.384-2.395a140 140 0 0 0-4.457-4.226l-2.087-1.835c-7.155-6.106-12.769-8.886-18.292-8.886c-11.543 0-20.746 8.564-20.746 18.921c0 10.358 9.203 18.922 20.746 18.922c6.002 0 10.482-1.965 14.584-5.612a35 35 0 0 0 1.57-1.491l2.941-3.133a5.565 5.565 0 0 1 8.5 7.161l-.51.591l-2.033 2.191a50 50 0 0 1-3.072 2.998c-6.013 5.348-13.03 8.426-21.98 8.426c-17.519 0-31.876-13.362-31.876-30.053c0-16.69 14.357-30.052 31.876-30.052c11.678 0 21.26 6.476 35.11 20.62q8.632 9.135 8.88 9.644l2.53 2.59c11.124 11.178 18.65 16.12 26.014 16.12c11.543 0 20.746-8.564 20.746-18.922c0-10.357-9.203-18.921-20.746-18.921c-6.002 0-10.482 1.965-14.584 5.612a35 35 0 0 0-1.57 1.49l-1.311 1.373l-1.63 1.76a5.565 5.565 0 0 1-8.108-7.625l2.15-2.318a50 50 0 0 1 3.073-2.998c6.013-5.347 13.03-8.425 21.98-8.425'/%3E%3C/svg%3E");
+}
+
+.vpi-demo-resources {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21 14l-9 6l-9-6m18-4l-9 6l-9-6l9-6z'/%3E%3C/svg%3E");
+}

package/lib/client/utils/shared.d.ts

@@ -0,0 +1,4 @@
+declare function loadScript(src: string): Promise<void>;
+declare function loadStyle(href: string, target: ShadowRoot): void;
+
+export { loadScript, loadStyle };

package/lib/client/utils/shared.js

@@ -0,0 +1,36 @@
+// src/client/utils/shared.ts
+var cache = {};
+function loadScript(src) {
+  if (__VUEPRESS_SSR__)
+    return Promise.resolve();
+  if (document.querySelector(`script[src="${src}"]`)) {
+    if (cache[src])
+      return cache[src];
+    return Promise.resolve();
+  }
+  const script = document.createElement("script");
+  script.src = src;
+  document.body.appendChild(script);
+  cache[src] = new Promise((resolve, reject) => {
+    script.onload = () => {
+      resolve();
+      delete cache[src];
+    };
+    script.onerror = reject;
+  });
+  return cache[src];
+}
+function loadStyle(href, target) {
+  if (__VUEPRESS_SSR__)
+    return;
+  if (target.querySelector(`link[href="${href}"]`))
+    return;
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = href;
+  target.appendChild(link);
+}
+export {
+  loadScript,
+  loadStyle
+};

package/lib/node/index.d.ts

@@ -1,5 +1,7 @@
-import { BuiltinTheme, ThemeRegistration } from 'shiki';
+import Token from 'markdown-it/lib/token.mjs';
 import { App } from 'vuepress';
+import { MarkdownEnv, Markdown } from 'vuepress/markdown';
+import { BuiltinTheme, ThemeRegistration } from 'shiki';
 import { Plugin } from 'vuepress/core';
 
 type CanIUseMode = 'embed' | 'image';
@@ -55,6 +57,29 @@ interface CodeTabsOptions {
     };
 }
 
+interface DemoFile {
+    type: 'vue' | 'normal' | 'css' | 'markdown';
+    export?: string;
+    path: string;
+    gitignore?: boolean;
+}
+interface MarkdownDemoEnv extends MarkdownEnv {
+    demoFiles?: DemoFile[];
+}
+interface DemoMeta {
+    type: 'vue' | 'normal' | 'markdown';
+    url: string;
+    title?: string;
+    desc?: string;
+    codeSetting?: string;
+    expanded?: boolean;
+}
+interface DemoContainerRender {
+    before: (app: App, md: Markdown, env: MarkdownDemoEnv, meta: DemoMeta, codeMap: Record<string, string>) => string;
+    after: () => string;
+    token?: (token: Token, tokens: Token[], index: number) => void;
+}
+
 type FileTreeIconMode = 'simple' | 'colored';
 interface FileTreeOptions {
     icon?: FileTreeIconMode;
@@ -252,6 +277,10 @@ interface MarkdownPowerPluginOptions {
      * @default false
      */
     fileTree?: boolean | FileTreeOptions;
+    /**
+     * 是否启用 demo 语法
+     */
+    demo?: boolean;
     /**
      * 是否启用 caniuse 嵌入语法
      *
@@ -326,4 +355,4 @@ declare function resolveImageSize(app: App, url: string, remote?: boolean): Prom
 
 declare function markdownPowerPlugin(options?: MarkdownPowerPluginOptions): Plugin;
 
-export { type ArtPlayerTokenMeta, type BilibiliTokenMeta, type CanIUseMode, type CanIUseOptions, type CanIUseTokenMeta, type CodeSandboxTokenMeta, type CodeTabsOptions, type CodepenTokenMeta, type FileTreeIconMode, type FileTreeOptions, type IconsOptions, type JSFiddleTokenMeta, type MarkdownPowerPluginOptions, type NpmToOptions, type NpmToPackageManager, type PDFEmbedType, type PDFOptions, type PDFTokenMeta, type PlotOptions, type ReplEditorData, type ReplOptions, type ReplitTokenMeta, type SizeOptions, type ThemeOptions, type VideoOptions, type YoutubeTokenMeta, markdownPowerPlugin, resolveImageSize };
+export { type ArtPlayerTokenMeta, type BilibiliTokenMeta, type CanIUseMode, type CanIUseOptions, type CanIUseTokenMeta, type CodeSandboxTokenMeta, type CodeTabsOptions, type CodepenTokenMeta, type DemoContainerRender, type DemoFile, type DemoMeta, type FileTreeIconMode, type FileTreeOptions, type IconsOptions, type JSFiddleTokenMeta, type MarkdownDemoEnv, type MarkdownPowerPluginOptions, type NpmToOptions, type NpmToPackageManager, type PDFEmbedType, type PDFOptions, type PDFTokenMeta, type PlotOptions, type ReplEditorData, type ReplOptions, type ReplitTokenMeta, type SizeOptions, type ThemeOptions, type VideoOptions, type YoutubeTokenMeta, markdownPowerPlugin, resolveImageSize };