React component to render markdown with code highlight

Question

I need to create a documentation component that renders .md files.

I have a collection of .md files (that could potentially be stored in a DB instead of having files) and I would like to allow users do navigate the documentation and see articles.

About rendering the files I've tried most of the stuff the Google has listed am currently, I am experimenting with the component react-markdown.

I'm having trouble figuring out the code highlight peace and I was wondering if there is a component out there, that does that out of the box or that have it as a straight boolean option.

<ReactMarkdown source={file}/>

note: I've checked the answer in How do I render Markdown from a React component? and couldn't find a good one.

have you made any progress on this? I've been fondling this sort of thing for a few days now with little to no success. I can't seem to load my markdown from an external file. I was going to post my own question but thought I'd shoot you a comment and see if you've had any success. Cheers. — rimraf
– rimraf, Commented Aug 4, 2017 at 4:17

Bexultan Myrzatay · Accepted Answer · 2019-07-20 08:36:39Z

4

I solved the issue by using React Syntax Highlighter and passing it into React Markdown's renderers attribute. It has a support for Prism.js and Highlight.js syntax highlighter libraries.

Have been searching for the solution for a while, and wrote a blog post on solving the particular problem. Check it out!

edited Jul 20, 2019 at 8:36

answered Jan 31, 2019 at 15:14

Bexultan Myrzatay

1,22512 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React component to render markdown with code highlight

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related