fix(responseBody): json response highlighting (#6871)

Refs #6508 

* Add language prop to HighlightCode component

* Use language prop for JSON HighlightCode responses in response-body.jsx

src/core/components/highlight-code.jsx

@@ -12,6 +12,7 @@ export default class HighlightCode extends Component {
     className: PropTypes.string,
     downloadable: PropTypes.bool,
     fileName: PropTypes.string,
+    language: PropTypes.string,
     canCopy: PropTypes.bool
   }
 
@@ -39,14 +40,15 @@ export default class HighlightCode extends Component {
   }
 
   render () {
-    let { value, className, downloadable, getConfigs, canCopy } = this.props
+    let { value, className, downloadable, getConfigs, canCopy, language } = this.props
 
     const config = getConfigs ? getConfigs() : {syntaxHighlight: {activated: true, theme: "agate"}}
 
     className = className || ""
 
     const codeBlock = get(config, "syntaxHighlight.activated")
       ? <SyntaxHighlighter
+          language={language}
           className={className + " microlight"}
           onWheel={this.preventYScrollingBeyondElement}
           style={getStyle(get(config, "syntaxHighlight.theme"))}

src/core/components/response-body.jsx

@@ -94,13 +94,15 @@ export default class ResponseBody extends React.PureComponent {
       // Anything else (CORS)
     } else if (/json/i.test(contentType)) {
       // JSON
+      let language = null
       try {
         body = JSON.stringify(JSON.parse(content), null, "  ")
+        language = "json"
       } catch (error) {
         body = "can't parse JSON.  Raw result:\n\n" + content
       }
 
-      bodyEl = <HighlightCode downloadable fileName={`${downloadName}.json`} value={ body } getConfigs={ getConfigs } canCopy />
+      bodyEl = <HighlightCode language={language} downloadable fileName={`${downloadName}.json`} value={ body } getConfigs={ getConfigs } canCopy />
 
       // XML
     } else if (/xml/i.test(contentType)) {