Q&A (please complete the following information)

• OS: any
• Browser: any
• Version: any
• Method of installation: npm
• Swagger-UI version: 3.24.0
• Swagger/OpenAPI version: 2.0/3.0

Content & configuration

Example OpenAPI spec: https://petstore.swagger.io/v2/swagger.json

Describe the bug you're encountering

The pre styles on .opblock-body make it very difficult to plug any component into the operation body that uses <pre>

To reproduce...

1. Wrap the Markdown component:

wrapComponents: {
	Markdown: () => ({ source }) => <pre>{source}</pre>
},

2. Render an OpenAPI spec, e.g. https://petstore.swagger.io/v2/swagger.json
3. Expand an operation

Expected behavior

It should be possible to render <pre> a component plugin under operation using the styles that I give to it. It assumes the colors from .opblock-body pre.

Screenshots

Additional context or thoughts

The issue is with these styles in _layout.css:

.opblock-body pre
{
    font-size: 12px;

    margin: 0;
    padding: 10px;

    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    word-break: break-word;
    hyphens: auto;

    border-radius: 4px;
    background: $opblock-body-background-color;

    overflow-wrap: break-word;
    @include text_code($opblock-body-font-color);
    span
    {
        color: $opblock-body-font-color !important;
    }

    .headerline
    {
        display: block;
    }
}

Adding a class to the stylesheet seems to solve the problem: .opblock-body pre.microlight. I will submit a PR