Support syntaxHighlight prop in swagger-ui-react

Q&A (please complete the following information)

• OS: MacOS
• Browser: Chrome
• Version: 110.0.5481.100
• Method of installation: npm i swagger-ui-react
• Swagger-UI version: 4.15.5
• Swagger/OpenAPI version: OpenAPI 3.0

Content & configuration

Swagger-UI configuration options:

import Swagger from "swagger-ui-react"
import "swagger-ui-react/swagger-ui.css"

const RenderSwaggerUI = () =>{
   return <Swagger
      key={SWAGGER_URL}
      url={SWAGGER_URL}
      deepLinking
      syntaxHighlight={false}
    />
}

Describe the bug you're encountering

Because syntaxHighlight prop is not supported by swagger-ui-react, the agate theme is always used by default for syntax highlighting.

Expected behavior

Support syntaxHighlight prop in swagger-ui-react

Additional context or thoughts

The swagger page becomes unresponsive when syntax highlighting is enabled and the response payload is huge (swagger-ui open issues related to this #8260 #3832 ). Workaround for this is to disable the syntax highlighting by setting the syntaxHighLight prop to false.

Since swagger-ui already supports configuring this prop, I believe appending the following line to constructor block in swagger-ui-react should do the trick.

// Modify the https://github.com/swagger-api/swagger-ui/blob/master/flavors/swagger-ui-react/index.jsx

const ui = swaggerUIConstructor({
...,
syntaxHighlight: this.props.syntaxHighlight
})

SwaggerUI.propTypes = {
syntaxHighlight: PropTypes.oneOfType([ PropTypes.bool, PropTypes.object ]),
}

Start in flavors/swagger-ui-react/index.jsx, especially the SwaggerUI constructor block and the component's propTypes. Trace how existing props reach the Swagger UI constructor, then verify that the documented syntaxHighlight prop is accepted and configured as described; the issue provides no test path, so check the package's existing test setup for validation.