diff --git a/src/core/components/response.jsx b/src/core/components/response.jsx
index cf404d07a9d..81d8ffb8fd3 100644
--- a/src/core/components/response.jsx
+++ b/src/core/components/response.jsx
@@ -10,7 +10,7 @@ const getExampleComponent = ( sampleResponse, HighlightCode ) => {
     sampleResponse !== undefined &&
     sampleResponse !== null
   ) { return <div>
-      <HighlightCode className="example" value={ sampleResponse } />
+      <HighlightCode className="example" value={ stringify(sampleResponse) } />
     </div>
   }
   return null
diff --git a/test/e2e-cypress/tests/bugs/5458.js b/test/e2e-cypress/tests/bugs/5458.js
index da92e4cc880..3c0ccb67ff4 100644
--- a/test/e2e-cypress/tests/bugs/5458.js
+++ b/test/e2e-cypress/tests/bugs/5458.js
@@ -1,18 +1,22 @@
 // http://github.com/swagger-api/swagger-ui/issues/5458
 
+const expectedValue = `{
+  "foo": "custom value"
+}`
+
 describe("#5458: Swagger 2.0 `Response.examples` mappings", () => {
   it("should render a custom example when a schema is not defined", () => {
     cy.visit("/?url=/documents/bugs/5458.yaml")
       .get("#operations-default-get_foo1")
       .click()
       .get(".model-example .highlight-code")
-      .contains("custom value")
+      .contains(expectedValue)
   })
   it("should render a custom example when a schema is defined", () => {
     cy.visit("/?url=/documents/bugs/5458.yaml")
       .get("#operations-default-get_foo2")
       .click()
       .get(".model-example .highlight-code")
-      .contains("custom value")
+      .contains(expectedValue)
   })
 })