marked-react

> Render Markdown as React components using [marked].


TL;DR

- Uses marked to parse markdown
- Renders actual react elements instead of using dangerouslySetInnerHTML
- HTML in markdown is rendered as plain text

[Demo]

Installation

``bash
$ npm i marked-react
`

Usage

`js
import ReactDOM from 'react-dom';
import Markdown from 'marked-react';

const domContainer = document.getElementById('root');
const root = ReactDOM.createRoot(domContainer);
root.render(# Hello world!);
`

$3

- value[string] - Markdown content.
- baseURL [string] - A prefix url for any relative link.
- openLinksInNewTab [boolean] - Attribute target=_blank will be added to link elements
- langPrefix [string] - A string to prefix the className in a block. Useful for syntax highlighting. Defaults to language-.
- breaks [boolean] - Add br tag on single line breaks. Requires gfm to be true
- gfm [boolean] - Use approved Github Flavoured Markdown
- isInline[boolean] - Parse inline markdown.

Syntax highlight code blocks

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