callumlocke / json-formatter

Makes JSON easy to read.
https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=en
BSD 3-Clause "New" or "Revised" License
3.8k stars 878 forks source link

hljs Theme Support #147

Open Lachee opened 5 years ago

Lachee commented 5 years ago

Added support for Highlight.JS themes. The results can be seen below. Basically added additional class names to the nodes to match hljs stylesheets, created a options page to show theme selection and some other minor css tweaks to get it to work. The manifest has been updated to include a new storage and web-accessible-resources to accommodate for theme selection.

The readme has also been updated to include working examples of JSON files.

Examples:

dark theme a light theme a blue theme options

broofa commented 4 years ago

This adds a lot of unnecessary file bloat. Worse, it creates additional maintenance burden for this project. As styles are added/removed/updated on the HighlighJS site, this project will be expected to follow suit.

My suggestion: Implement a generic theming feature that allows for the specification of a background color, JSON key color, and colors for each of the 5 JSON types. These can get stored in whatever local storage mechanism is available to chrome extensions. For the UI, there should be 10-12 out-of-the-box themes users can choose from (5-6 light, 5-6 dark), and a "custom" option that lets them set the colors manually. (using HTML5 color inputs).

For HighlightJS support, the "custom" UI could include an option for loading the color fields from one of the HighlightJS themes. But the HighlightJS themes and theme colors should all be fetched dynamically from the HightightJS github repo. (You can get a list of themes and download urls for each theme at this Github API url. This will avoid the aforementioned maintenance burden.