Customizable live demos (renderers?) via codefences with "meta" tags

[NullVoxPopuli]

Is your feature request related to a problem? Please describe.

Vitepress offers a lot, but it doesn't allow any live demo support from the markdown.

For example, in my own experiments, I use the live tag to denote something should be rendered:

markdown code here

```jsx live
export default function App() {
  return <h1>Hello World</h1>
}
```

Closest thing I've seen is https://vitepress.dev/reference/default-theme-search#custom-content-renderer but that would require emitting a script tag in the HTML -- which... is maybe the best we can do with SSG?

Describe the solution you'd like

have a way to hook in to code fences, with a live meta tag, and have them render.

I've done some thinking over here: https://github.com/NullVoxPopuli/limber/issues/1632, the return value could be a VueComponent, since VitePress is in Vue .. but i guess.. is there any Vue left over at run time?

maybe a script tag is the only way to move forward :think

Describe alternatives you've considered

1. I use existing behavior with script tag
   • except, I probably need to figure out how to get a compiler and a whole mess of dependencies into the build as well hmm
2. I write a competitor to VitePress, (wish me luck lol (and a time machine))

Additional context

thanks! vitepress is great!

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Read the Contributing Guidelines.
• [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

Write a markdown-it plugin (add it via markdown.config) and return a vue component from it. Let me know if you need help regarding the mdit part (it'll be ~5 line code IG).