Refractor usage in browser

[Vladimir Skok]

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

[Titus]

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

[Vladimir Skok]

I want to use refractor clientside with other unified plugins.

[Titus]

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?

[Vladimir Skok]

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 👍

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

[Titus]

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!

[Vladimir Skok]

Gotcha, thanks for the clarification!