React-styleguidist: Live editing HTML code blocks

[davidjb]

Styleguidist allows you to use JS/JSX code blocks as "playground langs" (eg you get the CodeMirror editor and can edit examples live) and this is great for helping people try something out.

In my case, it'd be ideal to allow live editing of HTML code blocks too to help demonstrate recommendations of markup, classes, layout structure etc that aren't specifically tied to React components.

Has this been considered before? I can (somewhat) workaround the issue by creating fake blocks like this:

```jsx
<div className="wrapper">
  <a className="btn btn-primary">Example</a>
  <img src="img.svg" />
</div>
``‌`

but I have to use React/JSX syntax which deviates from standard HTML in attributes, requires self-closing tags, etc. Likewise, there's the PLAYGROUND_LANGS in chunkify.js but there's more work required to handle treating the codeblock as HTML and not JS/JSX later that I've not gone into yet.

In short, I was curious as to a) whether this'd be considered before and b) if a PR implementing the feature would be useful before I start digging further.

Thanks for such an awesome project.

[sapegin]

I think it could be a cool feature if we can generalize it: to allow rendering any kind of markup, not just HTML, so Styleguidist could be set up to render Mustache templates or Vue or whatever they want. But I have no idea how to do that and how complex it could be. Would be super cool if you could investigate more! 🦄

[davidjb]

@sapegin Yep, generalisation would be really good. I'll take a look into this when I get time but in the meantime, anyone else can feel free to jump in with suggestions 😎

[Sholanki]

Can only a few specific (for instance - the ones that are most commonly used) code blocks be live edited instead of generalising the entire code block? It would address only specific code blocks for which code can be written down