davew/BDEVEXP-2652-redoc-json-coloring

demo/openapi.yaml

@@ -813,6 +813,7 @@ components:
         photoUrls:
           description: The list of URL to a cute photos featuring pet
           type: array
+          example: http://facebook.com/maxthecat
           maxItems: 20
           xml:
             name: photoUrl

src/common-elements/PrismDiv.tsx

@@ -50,6 +50,7 @@ export const PrismDiv = styled.div`
 
   .token.punctuation {
     opacity: 0.7;
+    color: #FA669C;
   }
 
   .namespace {
@@ -58,26 +59,30 @@ export const PrismDiv = styled.div`
 
   .token.property,
   .token.tag,
-  .token.number,
   .token.constant,
   .token.symbol {
-    color: #4a8bb3;
+    color: #17B92A;
   }
 
+  .token.number {
+    color: #19B4B6;
+  }
   .token.boolean {
-    color: firebrick;
+    color: #19B4B6;
+  }
+  .token.url {
+    color: #2DA9EE;
   }
-
   .token.selector,
   .token.attr-name,
   .token.string,
   .token.char,
   .token.builtin,
   .token.inserted {
-    color: #a0fbaa;
+    color: #19B4B6;
     & + a,
     & + a:visited {
-      color: #4ed2ba;
+      color: #19B4B6;
       text-decoration: underline;
     }
   }
@@ -86,9 +91,9 @@ export const PrismDiv = styled.div`
     color: white;
   } */
 
+
   .token.operator,
   .token.entity,
-  .token.url,
   .token.variable {
     color: hsl(40, 90%, 60%);
   }

src/utils/jsonToHtml.ts

@@ -14,11 +14,11 @@ export function jsonToHTML(json, maxExpandLevel) {
 function htmlEncode(t) {
   return t !== undefined
     ? t
-        .toString()
-        .replace(/&/g, '&')
-        .replace(/"/g, '"')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
+      .toString()
+      .replace(/&/g, '&amp;')
+      .replace(/"/g, '&quot;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
     : '';
 }
 
@@ -58,7 +58,7 @@ function valueToHTML(value, maxExpandLevel: number) {
         '<a href="' +
         value +
         '">' +
-        htmlEncode(stringifyStringLiteral(value)) +
+        decorateWithSpan(htmlEncode(stringifyStringLiteral(value)), "token url") +
         '</a>' +
         decorateWithSpan('"', 'token string');
     } else {
@@ -106,7 +106,8 @@ function objectToHTML(json, maxExpandLevel: number) {
     const key = keys[i];
     hasContents = true;
     output += '<li><div class="hoverable ' + collapsed + '">';
-    output += '<span class="property token string">"' + htmlEncode(key) + '"</span>: ';
+    output += '<span class="property token">"' + htmlEncode(key) + '"</span>';
+    output += punctuation(':') + ' ';
     output += valueToHTML(json[key], maxExpandLevel);
     if (i < length - 1) {
       output += punctuation(',');