Question: How to render a dynamic string variable in code section?

[fkapsahili]

Is there a way to render a variable as a string in a code block with syntax highlighting? The following code probably best describes what we have in mind:

import {Tabs, Pre, Playground} from 'nextra/components';
import Button from '@/components/ui/Button';
import ButtonSource from '!raw-loader!@/components/ui/Button';

# Button

Displays a button component.

<Tabs items={['Preview', 'Code']} defaultIndex="0">
  <Tabs.Tab>
        <Button>
            Button Preview
        </Button>
  </Tabs.Tab>

  <Tabs.Tab>
    # Here it should render the string contents correctly with syntax highlighting.
    # But this won't work, as the variable `ButtonSource` in the curly brackets is interpreted as regular code.
    ```tsx
   {ButtonSource}
    ```
  </Tabs.Tab>
</Tabs>

I think this must be somehow possible but I did not find a solution yet that works with correct syntax highlighting of the Button component's TypeScript code. When I try to render it manually using Nextra's Pre and Code components, it renders the string content of the ButtonSource variable correctly, but obviously without correct syntax highlighting:

<Pre>
  <Code>
    {ButtonSource}
  </Code>
</Pre>

Does anyone have an idea how we could achieve this?