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;
 

test/mocha/components/live-response.jsx

@@ -43,8 +43,11 @@ describe("<LiveResponse/>", function(){
       let response = fromJSOrdered({
         status: 200,
         url: "http://petstore.swagger.io/v2/pet/1",
-        headers: {},
+        headers: {
+          "content-type": "application/xml"
+        },
         text: "<response/>",
+        duration: 50
       })
 
       let mutatedRequestForSpy = createSpy().andReturn(mutatedRequest)
@@ -81,8 +84,20 @@ describe("<LiveResponse/>", function(){
       expect(curl.props().request).toBe(requests[test.expected.request])
 
       const expectedUrl = requests[test.expected.request].get("url")
-      expect(wrapper.find("div.request-url pre").text()).toEqual(expectedUrl)
+      expect(wrapper.find("div.request-url pre.microlight").text()).toEqual(expectedUrl)
+
+      let duration = wrapper.find("Duration")
+      expect(duration.length).toEqual(1)
+      expect(duration.props().duration).toEqual(50)
+      expect(duration.html())
+        .toEqual("<div><h5>Request duration</h5><pre class=\"microlight\">50 ms</pre></div>")
 
+      let responseHeaders = wrapper.find("Headers")
+      expect(duration.length).toEqual(1)
+      expect(responseHeaders.props().headers.length).toEqual(1)
+      expect(responseHeaders.props().headers[0].key).toEqual("content-type")
+      expect(responseHeaders.html())
+        .toEqual("<div><h5>Response headers</h5><pre class=\"microlight\"><span class=\"headerline\"> content-type: application/xml </span></pre></div>")
     })
   })
 })