Raw <code> html tag visible in 'Response' box on gerated API endpoint documentation pages

[TJSolecki]

Describe the bug

The content of the 'Response' section in the bottom right of each api endpoint documentation page, has a raw html tag visible. The plaintext content is:

Click the <code>Send API Request</code> button above and see the response here!

Expected behavior

This code HTML element should be rendered to the DOM, not rendered as plaintext.

Current behavior

The user see's a raw code block in this box instead:

Click the <code>Send API Request</code> button above and see the response here!
          ^^^^^ Here.           ^^^^^^ and here.

Possible solution

In the component this is called in ApiExplorer/Response/index.tsx this content is wrapped in a translate() call from @docusaurus/Translate. This function does render any markup and simply returns a string. Instead, a Translate component from @docusaurus/Translate should be used. This JSX component has the ability to interpolate JSX elements like so:

            <Translate
                id={OPENAPI_RESPONSE.PLACEHOLDER}
                values={{
                    code: (
                        <code>
                            <Translate id="theme.openapi.request.button">Send API Request</Translate>
                        </code>
                    ),
                }}>
                {"Click the {code} button above and see the response here!"}
            </Translate>

Steps to reproduce

1. Visit https://docusaurus-openapi.tryingpan.dev/petstore/new-pet
2. See the content of the 'Response' box in the bottom left of the page
3. Observe raw <code></code> html tag in content

Screenshots

Context

This affects users by making it less clear which button the dialog is referring to.

Your Environment

• Version used: 4.7.1
• Environment name and version: Firefox 147.0.2
• Operating System and version: MacOS 26.2
• Link to your project: https://docusaurus-openapi.tryingpan.dev/petstore31/new-pet