Allow <Source> and <Canvas> docBlocks to accept children

[bschlenk]

Is your feature request related to a problem? Please describe.

I'm finding the auto-generated code to be somewhat unreliable, I think because our storybook winds up minified and we aren't always adding displayName to our react components, so the codeblock winds up showing the minified name. We also have hooks we want o show in docs, but the generated code doesn't know about the hooks.

I want to be able to manually provide code examples, but I'm forced to provide them as a string either with <Canvas of={} source={{ code: source code here }} /> or <Source code={source code here} />. This means I have to type the code out manually with no help from prettier.

Describe the solution you'd like

If these components took children, I would be able to write the code out as a regular mdx source block with backticks, where I'd get the benefits of prettier formatting and syntax highlighting.

<Source>

```tsx
function MyComponent() {}
```

</Source>

Describe alternatives you've considered

I can use the method that works now, passing a string, but it's harder to maintain.

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

No response