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
$ npm i marked-reactimport 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>);- value[
string] - Markdown content. - baseURL [
string] - A prefix url for any relative link. - openLinksInNewTab [
boolean] - Attributetarget=_blankwill 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] - Addbrtag on single line breaks. Requiresgfmto betrue - gfm [
boolean] - Use approved Github Flavoured Markdown - isInline[
boolean] - Parse inline markdown.
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
