fix: code highlight styles are now only applied pre.microlight (#5673)

* patch(#5672): code highlight styles are now only applied to pre blocks that have the class pre.microlight

* fixed pre style appied to .request-url

* fixed response-headers and request-duration pre blocks

* made pre.microlight class as per review

* added microlight class to appropriate pre and added tests

src/core/components/live-response.jsx

@@ -7,7 +7,7 @@ const Headers = ( { headers } )=>{
   return (
     <div>
       <h5>Response headers</h5>
-      <pre>{headers}</pre>
+      <pre className="microlight">{headers}</pre>
     </div>)
 }
 Headers.propTypes = {
@@ -18,7 +18,7 @@ const Duration = ( { duration } ) => {
   return (
     <div>
       <h5>Request duration</h5>
-      <pre>{duration} ms</pre>
+      <pre className="microlight">{duration} ms</pre>
     </div>
   )
 }
@@ -75,7 +75,7 @@ export default class LiveResponse extends React.Component {
         { url && <div>
             <h4>Request URL</h4>
             <div className="request-url">
-              <pre>{url}</pre>
+              <pre className="microlight">{url}</pre>
             </div>
           </div>
         }

src/core/components/response-body.jsx

@@ -87,7 +87,7 @@ export default class ResponseBody extends React.PureComponent {
             bodyEl = <div><a href={ href } download={ download }>{ "Download file" }</a></div>
         }
       } else {
-        bodyEl = <pre>Download headers detected but your browser does not support downloading binary via XHR (Blob).</pre>
+        bodyEl = <pre className="microlight">Download headers detected but your browser does not support downloading binary via XHR (Blob).</pre>
       }
 
       // Anything else (CORS)
@@ -123,7 +123,7 @@ export default class ResponseBody extends React.PureComponent {
 
       // Audio
     } else if (/^audio\//i.test(contentType)) {
-      bodyEl = <pre><audio controls><source src={ url } type={ contentType } /></audio></pre>
+      bodyEl = <pre className="microlight"><audio controls><source src={ url } type={ contentType } /></audio></pre>
     } else if (typeof content === "string") {
       bodyEl = <HighlightCode downloadable fileName={`${downloadName}.txt`} value={ content } />
     } else if ( content.size > 0 ) {

src/style/_layout.scss

@@ -596,7 +596,7 @@
   }
 }
 
-.opblock-body pre
+.opblock-body pre.microlight
 {
     font-size: 12px;