Refractor usage in browser

[iamskok]

Thanks a lot for making this plugin, I previously used rehype-prism and it was working like a charm.

For my current project, I'm implementing syntax highlighting which has to work client side, so I was following this documentation sections, though I have some difficulties injecting it in unified pipeline:

Code:

... other imports
import refractor from 'refractor/core.js'; 
import js from 'refractor/lang/javascript.js';
refractor.register(js);

const Comment = (props) => {
    const nodes = refractor.highlight(props.body, 'js');
    const prismjs = rehype()
        .stringify({type: 'root', children: nodes});

    const body = unified()
        .use([
            markdown,
            emoji,
            breaks,
            [remark2rehype, {allowDangerousHTML: true}],
            rehypeRaw,
            [github, {repository: 'user/repo'}],
            prismjs
            format,
            html
        ])
        .processSync(props.body)
        .toString();

    return (
        <div className="comment">
            <img src={props.avatar} className="comment__avatar" />
            <div className="comment__author">{props.author}</div>
            <div className="comment__date">{props.date}</div>
            <div dangerouslySetInnerHTML={{__html: body}} />
        </div>
    )
}

export default Comment;

String:

```js
alert('xxx')

Error:

Error: Expected usable value, not <span class="token template-string"><span class="token string">``</span></span><span class="token template-string"><span class="token string">js alert('xxx') </span></span><span class="token template-string"><span class="token string">``</span></span>

▼ 3 stack frames were expanded. add node_modules/unified/index.js:209 addList node_modules/unified/index.js:224 Function.use node_modules/unified/index.js:177

Can refractor automatically determine language syntax or it has to be specifically defined in `refractor.highlight(data, 'language-syntax')`?

Any help will be greatly appreciated :octocat: 

[wooorm]

What do you want to do? Create a unified plugin? Use syntax highlighting in React? Use refractor?

[iamskok]

I want to use refractor clientside with other unified plugins.

[wooorm]

Why not use @mapbox/rehype-prism? If there are reasons to not use rehype-prism (such as a lower browser footprint), you could copy the plugin and take away the things you don’t need. Alternatively, a PR to rehype-prism to include a “light” build/plugin instead may be a good way to go?

[iamskok]

Yes, my main goal is to lower browser footprint. So refractor can't be used directly with other unified plugins?

PR looks like a good idea :+1:

Is there any way to pass the required languages to rehype-prism options or they have to be declared only inside of the package?

[wooorm]

Correct, refractor is not a unified plugin.

Is there any way to pass the required languages to rehype-prism options or they have to be declared only inside of the package?

That depends on what the people of rehype-prism would like, it’s an issue there, and will result in API changes there!

[iamskok]

Gotcha, thanks for the clarification!