json-viewer icon indicating copy to clipboard operation
json-viewer copied to clipboard

add css class for null, false and true values

Open picaron opened this issue 4 years ago • 3 comments

it would be useful if you could add a css class for special values such as null, false and true

I would really like to add custom CSS so that I can colorize those value differently, for example false values as red and true as green

when debugging large objects with many booleans, this would make it much easier to read.

picaron avatar Jul 24 '19 15:07 picaron

example JSON object:

{
  "createdOn": 1401918518000,
  "lastModified": 1486598293000,
  "vendorUUID": null,
  "configForPartner": null,
  "api11": true,
  "createUrl": null,
  "createUrlInteractive": false,
  "upgradeUrl": null,
  "upgradeUrlInteractive": false,
  "cancelUrl": null,
  "cancelUrlInteractive": false,
  "notifyUrl": null,
  "eventStatusUrl": null,
  "addonNotificationUrl": null,
  "assignUrl": null,
  "unassignUrl": null,
  "userUpdatedUrl": null,
  "upcomingInvoiceEnabled": false,
  "multipleSubscriptionsEnabled": false,
  "notificationEmail": null,
  "orderValidationUrl": null,
  "orderRequireFormFields": false,
  "updateRequireFormFields": false,
  "billRateRequired": false,
  "titleRequired": false,
  "departmentRequired": false,
  "zipCodeRequired": false,
  "timezoneRequired": false,
  "appAdminRequired": false,
  "accessRightsRequired": false,
  "userNameRequired": false,
  "passwordRequired": false,
  "idNumberRequired": false,
  "baseAdminApiUrl": null,
  "platformType": null,
  "otherPlatformType": null,
  "domainManagementEnabled": false,
  "restrictionUrl": null,
  "publishedSuiteVersion": false,
  "suiteName": null,
  "suiteUUID": null
}

picaron avatar Jul 24 '19 15:07 picaron

@picaron you can provide your own CSS to customize these things, go to the options view, you have a custom style area:

Screenshot 2019-07-25 at 10 54 46

tulios avatar Jul 25 '19 08:07 tulios

I know that @tulios but I cannot write a CSS rule that matches only the false or only the true values for example

for example I would like to do:

span.cm-null {
   color: blue;
}

span.cm-true {
   color: green;
}

span.cm-false {
   color: red;
}

picaron avatar Jul 25 '19 14:07 picaron