Embed custom component into code element

[tillkolter]

Hi,
I would like to implement a user friendly way to add generic parts to the code snippets. For example for some baseUrl variable, i.e.

```
curl GET <BaseUrl/>/api/path/xyz
```

with a custom component const BaseUrl = () => <>https://some-base-url.com</>

to result in

curl GET https://some-base-url.com/api/path/xyz

Can anyone explain me how to achieve this if this is possible?

[wooorm]

See https://mdxjs.com/guides/live-code for an example on how to overwrite a default construct, in this case also fenced code

[tillkolter]

Hmm, not sure how I can abstract my use case from that live example. I mean I understand how to override the construct, but the children attribute is a string, so how could I get from <BaseUrl/> to a JSX Component?

[wooorm]

How are expecting this to work, because indeed: code includes a string. Are you allowing anyone to type whatever JSX they want in there? Can folks add expressions too? imports exports? Whole if-statements?

What is the benefit of using code over:

<MyFancyComponent>
curl GET <BaseUrl/>/api/path/xyz
</MyFancyComponent>

[tillkolter]

I though about that as well, but the benefit would be in general:
less boilerplate for the "authors" of the markdown.

I will add the component globally via MDXProvider.

[ChristianMurphy]

@tillkolter MDX (and commonmark, and GFM) code blocks are, by design and definition, raw code.
JSX elements inside will not be interpreted.

There are a few options:

1. as @wooorm suggests, create a code block react element and wrap the section in <CodeBlock>code and <BaseUrl /> go here</CodeBlock>
2. Create a Plugin that transforms code blocks, running MDX on them a second time, to parse out the content https://mdxjs.com/guides/writing-a-plugin