Render Markdown as React components
npm install marked-react> Render Markdown as React components using [marked].



- Uses marked to parse markdown
- Renders actual react elements instead of using dangerouslySetInnerHTML
- HTML in markdown is rendered as plain text
[Demo]
``bash`
$ npm i marked-react
`js
import ReactDOM from 'react-dom';
import Markdown from 'marked-react';
const domContainer = document.getElementById('root');
const root = ReactDOM.createRoot(domContainer);
root.render(
`
- value[string] - Markdown content.string
- baseURL [] - A prefix url for any relative link.boolean
- openLinksInNewTab [] - Attribute target=_blank will be added to link elementsstring
- langPrefix [] - A string to prefix the className in a block. Useful for syntax highlighting. Defaults to language-.boolean
- breaks [] - Add br tag on single line breaks. Requires gfm to be trueboolean
- gfm [] - Use approved Github Flavoured Markdownboolean
- isInline[] - Parse inline markdown.
An example with [react-lowlight]
`js
import ReactDOM from 'react-dom';
import Markdown from 'marked-react';
import Lowlight from 'react-lowlight';
import javascript from 'highlight.js/lib/languages/javascript';
Lowlight.registerLanguage('js', javascript);
const renderer = {
code(snippet, lang) {
return
},
};
const markdown = 'console.log("Hello world!")';
const domContainer = document.getElementById('root');
const root = ReactDOM.createRoot(domContainer);
root.render(
``
Some awesome options available to highlight code
- [react-syntax-highlighter]
- [react-lowlight]
- [react-refractor]
[marked]: https://marked.js.org/
[demo]: https://sibiraj-s.github.io/marked-react/
[react-lowlight]: https://github.com/rexxars/react-lowlight
[react-refractor]: https://github.com/rexxars/react-refractor
[react-syntax-highlighter]: https://github.com/react-syntax-highlighter/react-syntax-highlighter