2.0.0 • Published 9 months ago
marked-react v2.0.0
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
Installation
$ npm i marked-react
Usage
import ReactDOM from 'react-dom';
import Markdown from 'marked-react';
const domContainer = document.getElementById('root');
const root = ReactDOM.createRoot(domContainer);
root.render(<Markdown># Hello world!</Markdown>);
Component Props
- value
string
- Markdown content. - baseURL
string
- A prefix url for any relative link. - openLinksInNewTab
boolean
- Attributetarget=_blank
will be added to link elements - langPrefix
string
- A string to prefix the className in a<code>
block. Useful for syntax highlighting. Defaults tolanguage-
. - breaks
boolean
- Addbr
tag on single line breaks. Requiresgfm
to betrue
- gfm
boolean
- Use approved Github Flavoured Markdown - isInline
boolean
- Parse inline markdown.
Syntax highlight code blocks
An example with react-lowlight
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 <Lowlight key={this.elementId} language={lang} value={snippet} />;
},
};
const markdown = 'console.log("Hello world!")';
const domContainer = document.getElementById('root');
const root = ReactDOM.createRoot(domContainer);
root.render(<Markdown value={markdown} renderer={renderer} />);
Some awesome options available to highlight code
1.4.0
10 months ago
2.0.0
9 months ago
1.3.2
1 year ago
1.3.1
2 years ago
1.3.0
2 years ago
1.2.0
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.3
2 years ago
1.0.0
2 years ago
0.3.0
3 years ago
0.2.1
3 years ago
0.2.0
3 years ago
0.1.2
3 years ago
0.1.1
3 years ago
0.1.0
3 years ago