tulios / json-viewer

It is a Chrome extension for printing JSON and JSONP.
https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh
MIT License
3.31k stars 678 forks source link

add css class for null, false and true values #233

Open picaron opened 5 years ago

picaron commented 5 years ago

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 commented 5 years ago

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
}
tulios commented 5 years ago

@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

picaron commented 5 years ago

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;
}