marked-react | Compare Similar npm Packages

Find Similar Packages for marked-react

Package	Downloads	Stars	Size	Issues	Publish	License

marked-react	39,159	80	71.8 kB	0	6 days ago	MIT

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

$ 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] - Attribute target=_blank will be added to link elements
langPrefix [string] - A string to prefix the className in a <code> 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

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