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: NullVoxPopuli/limber#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

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• 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).

More context on vue part - Say you register a component named CodeLive globally (via theme.enhanceApp), then you just need to return `<CodeLive :content="${stringified_content}"/>` for fence blocks.

[NullVoxPopuli]

oooo nice thanks!!!

[NullVoxPopuli]

I've opened this for tracking, thank you! NullVoxPopuli/limber#1714

[pearmini]

@NullVoxPopuli

I've created a custom theme called genji-theme-vitepress to achieve a similar effect:

```js eval code=false
size = Inputs.range([50, 300], { label: "size", value: 100, step: 1 });
```

```js eval
(() => {
  const div = document.createElement("div");
  div.style.width = size + "px";
  div.style.height = "100px";
  div.style.background = "orange";
  return div;
})();
```

This will produce:

I'd love for you to try it out and share your feedback with me!