Add syntax highlights

This really clashes visually with the colorization of the token parts (header, payload, signature). We need another fix for this.

Author: wcabus

src/Pages/Home/JwtDecoder/JwtDecoder.cshtml

@@ -63,7 +63,9 @@
                     <h4 class="pt-1">Payload</h4>
                     <div id="jwt-payload" class="jwt-decoded jwt-payload bg-dark p-2">&nbsp;</div>
                     <h4 class="pt-1">Signature</h4>
-                    <pre id="jwt-signature" class="jwt-decoded jwt-signature bg-dark p-2">&nbsp;</pre>
+                    <div class="jwt-decoded bg-dark p-2">
+                        <pre id="jwt-signature" class="jwt-signature">&nbsp;</pre>
+                    </div>
                     <div class="jwt-signature-validation-result alert alert-success align-items-center d-none">
                         <i class="glyphicon glyphicon-ok-sign" style="font-size: 3em" title="Valid signature"></i>
                         <div class="result-message mx-3">This JWT has a valid signature.</div>

src/wwwroot/css/site.css

@@ -114,32 +114,54 @@ a.navbar-brand .icon-banner {
 .jwt-decoder-container .jwt-decoded {
   text-wrap: auto;
   background-color: #000000;
+  color: #eee !important;
 }
-.jwt-decoder-container .jwt-decoded.jwt-header {
-  color: rgb(253.5223880597, 157.4776119403, 157.4776119403);
+.jwt-decoder-container .jwt-decoded.jwt-header .json-content {
+  background-color: rgba(252, 57, 57, 0.1882352941) !important;
 }
-.jwt-decoder-container .jwt-decoded.jwt-payload {
-  color: #46ec88;
+.jwt-decoder-container .jwt-decoded.jwt-payload .json-content {
+  background-color: rgba(19, 185, 85, 0.1882352941) !important;
 }
-.jwt-decoder-container .jwt-decoded.jwt-signature {
-  color: rgb(245.7438016529, 201.7768595041, 124.2561983471);
+.jwt-decoder-container .jwt-decoded .jwt-signature {
+  color: #eee !important;
+  background-color: rgba(239, 163, 29, 0.1882352941);
+  margin: 0;
 }
 .jwt-decoder-container .jwt-input-editable {
   word-wrap: anywhere;
 }
 .jwt-decoder-container .jwt-input-editable .text-danger {
-  color: rgb(253.5223880597, 157.4776119403, 157.4776119403) !important;
+  color: #eee !important;
+  background-color: rgba(252, 57, 57, 0.1882352941);
 }
 .jwt-decoder-container .jwt-input-editable .text-success {
-  color: #46ec88 !important;
+  color: #eee !important;
+  background-color: rgba(19, 185, 85, 0.1882352941);
 }
 .jwt-decoder-container .jwt-input-editable .text-warning {
-  color: rgb(245.7438016529, 201.7768595041, 124.2561983471) !important;
+  color: #eee !important;
+  background-color: rgba(239, 163, 29, 0.1882352941);
 }
 .jwt-decoder-container .json-content, .jwt-decoder-container .jwt-input-editable {
   font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: 1em;
 }
+.jwt-decoder-container .json-content {
+  color: #eee !important;
+}
+.jwt-decoder-container .json-content .json-key {
+  color: goldenrod !important;
+}
+.jwt-decoder-container .json-content .json-boolean, .jwt-decoder-container .json-content .json-number {
+  color: chocolate !important;
+}
+.jwt-decoder-container .json-content .json-string {
+  color: darkcyan !important;
+}
+.jwt-decoder-container .json-content .json-explanation {
+  color: springgreen !important;
+  font-style: italic;
+}
 .jwt-decoder-container .jwt-signature {
   font-size: 1em;
 }

src/wwwroot/css/site.min.css

@@ -128,33 +128,39 @@ a.navbar-brand {
   .jwt-decoded {
     text-wrap: auto;
     background-color: #000000;
+    color: #eee !important;
 
-    &.jwt-header {
-      color: lighten(#fc3939, 20%);
+    &.jwt-header .json-content {
+      background-color: #fc393930 !important;
     }
 
-    &.jwt-payload {
-      color: lighten(#13b955, 20%);
+    &.jwt-payload .json-content {
+      background-color: #13b95530 !important;
     }
 
-    &.jwt-signature {
-      color: lighten(#efa31d, 20%);
+    .jwt-signature {
+      color: #eee !important;
+      background-color: #efa31d30;
+      margin: 0;
     }
   }
 
   .jwt-input-editable {
     word-wrap: anywhere;
 
     .text-danger {
-      color: lighten(#fc3939, 20%) !important;
+      color: #eee !important;
+      background-color: #fc393930;
     }
 
     .text-success {
-      color: lighten(#13b955, 20%) !important;
+      color: #eee !important;
+      background-color: #13b95530;
     }
 
     .text-warning {
-      color: lighten(#efa31d, 20%) !important;
+      color: #eee !important;
+      background-color: #efa31d30;
     }
   }
 
@@ -163,6 +169,27 @@ a.navbar-brand {
     font-size: 1em;
   }
 
+  .json-content {
+    color: #eee !important;
+    
+    .json-key {
+        color: goldenrod !important;
+    }
+    
+    .json-boolean, .json-number {
+      color: chocolate !important;
+    }
+    
+    .json-string {
+      color: darkcyan !important;
+    }
+    
+    .json-explanation {
+      color: springgreen !important;
+      font-style: italic;
+    }
+  }
+  
   .jwt-signature {
     font-size: 1em;
   }