Support syntaxHighlight prop in swagger-ui-react

[be-a-sid]

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-reactshould 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 ]),
}

[laurismurans]

Is there a workaround for this while this is not implemented?

[heller-tobias]

Hi this is an issue for us, since it would help us with big payloads

[imshashank]

Any updates on this?

[jounii]

Since 5.17.14 the swagger-ui-react seems to export "config" property. Thus before using the you can write something like:

import SwaggerUI from 'swagger-ui-react';

SwaggerUI.config.defaults.syntaxHighlight.activated = false;

...

<SwaggerUI spec={...} />

Mind any TypeScript type issues, if you need to disable linter or any type access.