[Question] Add option to render the embed snippet (styleguide style)

[lucasmotta]

Description

Hello guys, I've been working on a Styleguide using Gatsby and I've been looking for ways of display code snippets with the actual snippet embeded as html. A good example, is how Styleguidist does. Let's assume I've a button and I want to display the code snippet on how to use it:

At the moment, to achieve this I would have to insert the code block and then after insert the same code, but outside the code block:

# This is the button

```html
<button class="button button--primary">
  Button
</button>
``

<button class="button button--primary">
  Button
</button>

That's not ideal, due the duplication of the same code. So I've been looking for solutions to do that on an easier way, so I found gatsby-remark-embed-snippet. What do you guys think of including an option to actually embed the code after/before the <pre> tag that is generated?

Something like this:

`embed:button.html!render`

Of course, the API we can discuss about it, it could also be a config on the gatsby-config.js file too, but what do you guys think about this idea? Or is it worth creating a different plugin to do that, since this is very confused on html snippets only.

[calcsam]

Tricky part is -- would you configure the plugin to do this across your whole site? What if someone only wanted this in a few places?

Have you tried the new Custom Components feature? Was just merged earlier this week.

[KyleAMathews]

Yeah, I think ideally you don't have to duplicate code which a) is a pain and b) you'll sooner or later there'll be inconsistencies.

With a remark plugin it'd be easy to duplicate the code.

This is what @calcsam is referring to https://using-remark.gatsbyjs.org/custom-components/

[zebapy]

I wrote a plugin for this (not published to npm) https://github.com/middlebury/design-system/blob/master/site/plugins/gatsby-remark-html-preview/index.js

usage (spaces in backticks cause idk how to escape them here)

` ``html example
<button>test</button>
` ``

It just duplicates and renders the markup before the code sample. Works fine with prism plugins.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!