Update json styles

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;

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;

templates/head_common.html

@@ -1,2 +1,2 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<link rel="stylesheet" href="/njump/static/styles.css?v=20230913" />
+<link rel="stylesheet" href="/njump/static/styles.css?v=20230914" />

templates/scripts.js

@@ -85,13 +85,17 @@ function syntaxHighlight(json) {
   json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
   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'