markdown-it-container Syntax Support

You can now use vitepress-better-demo-plugin through the markdown-it-container syntax. Install markdown-it-container, import createDemoContainer, and register it as a markdown-it plugin before using it.

import { defineConfig } from 'vitepress';
import mdContainer from 'markdown-it-container'
import { createDemoContainer } from 'vitepress-better-demo-plugin'; 
import path from 'path';

export default defineConfig({
  // other configs...
  markdown: {
    config(md) {
      md.use(mdContainer, 'demo', createDemoContainer(md, { 
        // ...
        demoDir: path.resolve(
          dirname(fileURLToPath(import.meta.url)),
          '../demos',
        ),
      }))
    },
  },
});

After the registration you can switch from the old syntax to markdown-it-container blocks, for example:

::: demo
vue="../demos/demo.vue"
:::

Rendered result:

<script setup lang="ts">
import { ref } from 'vue'

const count = ref<number>(0)

function increment() {
  count.value++
}

function decrement() {
  count.value--
}
</script>

<template>
  <div class="container">
    <div class="title">
      This is a Vue counter
    </div>
    <div class="btn-container">
      <button class="btn" @click="increment">
        +1
      </button>
      <button class="btn" @click="decrement">
        -1
      </button>
    </div>
    <div>Current count: {{ count }}</div>
  </div>
</template>

<style scoped>
.container {
  font-family: 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'SimSun',
    'sans-serif';
  font-size: 14px;
  line-height: 20px;
}
.title {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.btn-container {
  display: flex;
  align-items: center;
  column-gap: 24px;
}
.btn {
  cursor: pointer;
  background-color: #007bff;
  color: #fff;
  border: none;
  font-size: 14px;
  border-radius: 4px;
  line-height: 20px;
  padding: 4px 16px;
  margin: 12px 0;
}
</style>

loading

All options can be separated with either = or a whitespace. Both forms are equivalent and quotes can be omitted when the value does not contain spaces.

::: demo
vue ../demos/demo.vue
:::

<script setup lang="ts">
import { ref } from 'vue'

const count = ref<number>(0)

function increment() {
  count.value++
}

function decrement() {
  count.value--
}
</script>

<template>
  <div class="container">
    <div class="title">
      This is a Vue counter
    </div>
    <div class="btn-container">
      <button class="btn" @click="increment">
        +1
      </button>
      <button class="btn" @click="decrement">
        -1
      </button>
    </div>
    <div>Current count: {{ count }}</div>
  </div>
</template>

<style scoped>
.container {
  font-family: 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'SimSun',
    'sans-serif';
  font-size: 14px;
  line-height: 20px;
}
.title {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.btn-container {
  display: flex;
  align-items: center;
  column-gap: 24px;
}
.btn {
  cursor: pointer;
  background-color: #007bff;
  color: #fff;
  border: none;
  font-size: 14px;
  border-radius: 4px;
  line-height: 20px;
  padding: 4px 16px;
  margin: 12px 0;
}
</style>

loading

The plugin aligns with the element-plus documentation. If the first line inside the container does not contain = or a whitespace separator, it is treated as the path to a Vue demo and the .vue suffix can be omitted. The snippet above can therefore be shortened to:

::: demo
../demos/demo
:::

This simplification only applies to Vue demos. It matches the element-plus convention and optimizes for the most common use case of this plugin.