Syntax highlighting example

remarkjs / react-remark

React component and hook to use remark to render markdown

https://remarkjs.github.io/react-remark

MIT License

204 stars 7 forks source link

Syntax highlighting example #51

Closed rexwebmedia closed 2 years ago

rexwebmedia commented 2 years ago

Initial checklist

[X] I read the support docs
[X] I read the contributing guide
[X] I agree to follow the code of conduct
[X] I searched issues and couldn’t find anything (or linked relevant results below)

Problem

Not working with remark-prism.

Solution

Any lightweight syntax highlighter support.

Alternatives

Can't find any alternatives.

Murderlon commented 2 years ago

There is not enough information to help. "Not working with remark-prism" is not an helpful issue. Please refer to asking quality questions.

In the meantime, I recommend taking a look at this example with react-markdown: https://github.com/remarkjs/react-markdown#use-custom-components-syntax-highlight. The components prop from that package is similar to rehypeReactOptions.components from this package so it could serve as inspiration. Alternatively, switch to react-markdown and use that example.

rexwebmedia commented 2 years ago

Here's a minimal example https://stackblitz.com/edit/nextjs-sfulsg?file=pages/index.js

wooorm commented 2 years ago

This is a bug in that plugin. Raise it there. They have several open issues, perhaps it is already reported.

You initially mentioned “Any lightweight syntax highlighter support.” as a solution you are looking for. I believe remark-prism isn’t that. Perhaps you should use the highligher we maintain: https://github.com/rehypejs/rehype-highlight. Or https://github.com/mapbox/rehype-prism if you want prism.