diff --git a/static/styles.css b/static/styles.css index 2a41cb9..07a5202 100644 --- a/static/styles.css +++ b/static/styles.css @@ -776,6 +776,8 @@ iframe { } .container .column_content .field .json, .container .column_content .field .data { + font-family: "Courier New", Courier, monospace; + font-size: 0.9rem; white-space: pre-wrap; word-break: break-all; margin-top: 1rem; @@ -783,7 +785,6 @@ iframe { .container .column_content .field .json .key, .container .column_content .field .data .key { display: inline-block; - margin-top: 0.5rem; } .theme--default .container .column_content .field .json .key, .theme--default .container .column_content .field .data .key { @@ -801,6 +802,10 @@ iframe { .theme--dark .container .column_content .field .data .string { color: #fafafa; } +.container .column_content .field .json .string.content, +.container .column_content .field .data .string.content { + word-break: normal; +} .container .column_content .field .json .number, .container .column_content .field .data .number { color: darkorange; diff --git a/static/styles.scss b/static/styles.scss index 26fc564..ef842db 100644 --- a/static/styles.scss +++ b/static/styles.scss @@ -713,12 +713,13 @@ iframe { } .json, .data { + font-family: 'Courier New', Courier, monospace; + font-size: 0.9rem; white-space: pre-wrap; word-break: break-all; margin-top: 1rem; .key { display: inline-block; - margin-top: 0.5rem; @include themed() { color: t($accent1); } @@ -727,6 +728,9 @@ iframe { @include themed() { color: t($base7); } + &.content { + word-break: normal; + } } .number { color: darkorange; diff --git a/templates/head_common.html b/templates/head_common.html index 14d7725..6670e57 100644 --- a/templates/head_common.html +++ b/templates/head_common.html @@ -1,2 +1,2 @@ - + diff --git a/templates/scripts.js b/templates/scripts.js index 253cfa7..f6557ec 100644 --- a/templates/scripts.js +++ b/templates/scripts.js @@ -85,13 +85,17 @@ function syntaxHighlight(json) { json = json.replace(/&/g, '&').replace(//g, '>') return json.replace( /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, - function (match) { + function (match, p1) { var cls = 'number' if (/^"/.test(match)) { if (/:$/.test(match)) { cls = 'key' } else { - cls = 'string' + if (p1.length < 100) { + cls = 'string' + } else { + cls = 'string content' + } } } else if (/true|false/.test(match)) { cls = 'boolean'