Options to change the code template

[mrbinky3000]

Thanks for creating this. It's almost exactly what I was looking for.

How do you pass your own custom template to wrap the rendered tag and the html source?

[javiercf]

Can you give me an example of what you want to achieve?

[lukaswelinder]

@javiercf In many situations I find that the demo code needs to be more complicated than the codeblock. It would be nice to have some control over the way the block is handled.

[mrbinky3000]

Simply allow us to set the template as a string of HTML. Your current template shows us the formatted code, and inserts the rendered Component. It would be nice if those two things could be replaced by placeholders in our template string. For example <div>{{code}}</div><div>{{component}}</div>

[mrbinky3000]

I'm using handlebars above, but use any method you like.

[lukaswelinder]

@mrbinky3000 I was thinking something more along the lines of convention on the language/render declaration:

// Render component only:
~~~ render
<Component { ...props } />
~~~
// Render with code block:
~~~ render jsx
<Component { ...props } />
~~~

However I do like the idea of being able to decide where the component is rendered:

~~~ render(componentName) jsx
<Component { ...props } />
~~~

... some README stuff
{ componentName.codeblock }
... more README stuff
{ componentName.component }

Or something along those lines...

[fernandopasik]

I think if we support a custom template for the code source and executed, we'll need to add an option in the loader that would go into the webpack config.