1.3.3 • Published 12 months ago
mh-marked-react v1.3.3
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.3.3
12 months ago