react-prism

react-prism copied to clipboard

Hi folks! 👋

Shameless plug, but you should consider using refractor! It provides syntax highlighting using Prism, but outputs a virtual DOM instead of HTML (so you don’t use dangerouslySetInnerHTML any more), plus it uses CommonJS instead of globals! If you’d switch, you wouldn’t have to ask people to include prism.js (fixing #30)

As an aside, I also maintain lowlight, which is like refractor but wraps highlight.js, and is used in react-syntax-highlighter!

Wow @wooorm ! That's an impressive work!

One thine that concerns me is the usage on browser: https://github.com/wooorm/refractor#browser

I do not suggest using the pre-built files or requiring refractor in the browser as that would include a 250kb (90kb GZipped) file.

Instead, require refractor/core.js, and include only the used highlighters. For example:

Not sure how I should adapt this along with the current PrismCode API.

Maybe I should provide them two components, one is the original PrismCode component.

The other one would be PrismRefactor component, and the client would have to use it like this:

var refractor = require('refractor/core.js');
var jsx = require('refractor/lang/jsx.js');

refractor.register(jsx);

render(<PrismRefactor>{'JSX CODE'}</PrismRefactor>);

Even better:

var { PrismRefactor} = require('react-prism');
require('react-prism/register/refractor/lang/jsx'); // Which will call refractor.register(jsx); in that file

render(<PrismRefactor>{'JSX CODE'}</PrismRefactor>);

Thank you!

react-syntax-highlighter comes with a “light” build, similar to what you suggested, and I think that that is the best solution:

Normal build

Including all languages.

import {PrismCode} from "react-prism";
// ...

Light build

Includes only core languages.

import {PrismCode, register} from 'react-prism/light';
import js from 'react-prism/lang/javascript';
register(js);
// ...

You could also do the auto-register thing, but then languages need to require the light build themselves, and they won’t export anything, which I personally think is a bit weird, but 🤷‍♂️