[Feature Request] react-json-tree themes

[altitude]

Context

Usage react-json-tree alongside with Prism / prism-react-renderer

Request

Even if the component allows for a custom color set to be passed, it would be great to add to get more themes than solarized bundled in react-json-tree by out of the box; I propose to translate and bundle all of the Prism themes, which I think is also a good default as Docusaurus uses Prism by default and its theme are pretty standardized / close to what you get in code editors.

Bounty

I took the liberty to create a bounty for this issue with a first $50 added to it; should this not be a desired way to incentive contributions, I can obviously archive it.

[daiyam]

@altitude react-json-tree uses base16 themes which solarized is the most known and popular. So it would easier to import existing base16 themes (https://github.com/chriskempson/base16-schemes-source) than trying to convert existing a non-base16 theme from Prism to a base-16 theme. What do you think?

[altitude]

That's an interesting idea indeed, do you think we could also get a good intersection of appearance between what's in the box in Prism and what's in the box with base16?

[Methuselah96]

Note that there are also more themes to choose from provided by https://github.com/gaearon/base16-js, although I don't they're all that high quality.

[daiyam]

Base16 themes can be imported in prism: https://atelierbram.github.io/syntax-highlighting/prism/ Or we might be able to find equivalent base16 themes for those prism themes

@Methuselah96 Ya, LogMonitor is already using redux-devtools-themes which in turn use the repository you have mentioned.

I think react-json-tree should also use redux-devtools-themes

[Methuselah96]

I like to keep the react-json-tree package as separate from the Redux DevTools packages as much as possible, so I don't think react-json-tree should depend on redux-devtools-themes. The only additional theme that redux-devtools-themes has over base16 is nicinabox. Anyone can install redux-devtools-themes if they desire, I don't see any need to bundle it with react-json-tree.

[gitgudyyao]

First, you will need to install the prism-react-renderer library, which allows you to render syntax-highlighted code using React components.

You can install this library using npm or yarn:

npm install prism-react-renderer yarn add prism-react-renderer

Next, you will need to import the prism-react-renderer library and the desired Prism theme(s) in your project.

You can import the prism-react-renderer library like this:

import { Prism as SyntaxHighlighter } from 'prism-react-renderer';

You can import the desired Prism theme(s) by adding an import statement like this: import 'prism-themes/themes/prism-coy.css';

Once you have imported the prism-react-renderer library and the desired Prism theme(s), you can use the SyntaxHighlighter component provided by prism-react-renderer to render syntax-highlighted code in your react-json-tree component.

To do this, you will need to pass the code to be highlighted and the desired Prism language as props to the SyntaxHighlighter component.

Finally, you will need to make sure that the theme CSS files are correctly bundled with your project.

You can do this by adding the theme CSS files to your project's Webpack configuration, or by adding the theme CSS files to your HTML template manually.

[flying-sheep]

prism-react-renderer’s bundled themes are in another format, it comes with these bundled: https://github.com/FormidableLabs/prism-react-renderer/tree/master/src/themes