Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-07 13:44:54 +03:00
Code Issues Packages Projects Releases Wiki Activity

davew/BDEVEXP-2652-redoc-json-coloring

Browse Source
This commit is contained in:
davew 2020-09-16 12:15:50 -07:00
parent 0361aa51dc
commit a7cea7f4c1
3 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demo/openapi.yaml
View File

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

19
src/common-elements/PrismDiv.tsx
View File

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

15
src/utils/jsonToHtml.ts
View File

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