Use VitePress' Built-in Code Highlighting

The plugin now relies on the Shiki instance that ships with VitePress, so demo snippets use the same highlighting style as the rest of your documentation with zero extra setup. You can also use every transformer that VitePress enables by default without registering Shiki transformers yourself.

For example:

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

const count = ref<number>(0) 

function increment() {
  count.value++
  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

If you need to extend Shiki (for example to enable twoslash), configure it directly in the VitePress options. Refer to the official Shiki documentation for more details.

Code Block Meta (e.g. twoslash)

If you have enabled @shikijs/vitepress-twoslash in VitePress, you can append meta to the code fence language via codeMeta / vueMeta / reactMeta / htmlMeta so the twoslash suffix is passed through.

Global config

import { defineConfig } from 'vitepress';
import { vitepressDemoPlugin } from 'vitepress-better-demo-plugin';

export default defineConfig({
  markdown: {
    config(md) {
      md.use(vitepressDemoPlugin, {
        codeMeta: 'twoslash',
        // vueMeta/reactMeta/htmlMeta override codeMeta
      });
    },
  },
});

Local override

<demo vue="demo.vue" vue-meta="twoslash" />
<demo react="demo.tsx" code-meta="twoslash" />

loading