Override Preview code snippet

[jorenbroekema]

Currently it frustrates me that when I write demos where the source code of my demo is not the same as what I want my users to copy, I need to omit the and write the source code in a separate code block in the MDX, and this is always open and cannot be closed. This leads to bloat in my documentation.

I would like something where I can do:

<Preview>
  <Story name="default">
    <style>
      #myComp-ad82kbme7 {
        margin-top: 10px;
      }
    </style>
    <my-comp id="myComp-ad82kbme7">Show something cool</my-comp>
  </Story>
</Preview>

But omit the <style> block from the code snippet that the user can copy. Here it's a style block to make the demo have some needed spacing from the content above it. But I've also ran into other scenarios where I added some interactivity to my demo inside the story but I don't want that to be shown to the user and copied, because it's not relevant to the user; it's only there to amplify the demo, not to be used as source code for my users.

I am not sure how I would like the API to be if you guys were to agree it would be a good feature to have.

Maybe:

<Preview>
  <Story name="default">
    <style>
      #myComp-ad82kbme7 {
        margin-top: 10px;
      }
    </style>
    <my-comp id="myComp-ad82kbme7">Show something cool</my-comp>
  </Story>
  <Snippet>
    <my-comp>Show something cool</my-comp>
  </Snippet>
</Preview>

Describe alternatives you've considered
I have considered omitting the and just using simple code blocks below the like how you would do it in regular markdown. Problem is that this bloats my documentation because it's always open, and the code can be quite a lot.. This makes the whole docs less readable because you lose the overview.

Are you able to assist bring the feature to reality?
Yes but I may need some help to understand where the code lives.. I haven't got a clue where I can find this component (I searched but... no luck).

[shilman]

Closing this as a dupe to #7479