Consider refractor about react-prism HOT 4 OPEN

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.

from react-prism.

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

from react-prism.

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

from react-prism.

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 🤷‍♂️

from react-prism.