markdown

Render Markdown as React components using marked

Oct 30, 2021
Render Markdown as React components using marked

marked-react

Render Markdown as React components using marked.

View Demo View Github

TL;DR

  • Uses marked to parse markdown
  • Renders actual react elements instead of using dangerouslySetInnerHTML

Installation

$ npm i marked-react

Usage

import ReactDOM from 'react-dom'; import Markdown from 'marked-react'; const rootEl = document.getElementById('root'); ReactDOM.render(<Markdown># Hello world!</Markdown>, rootEl);

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

Syntax highlight code blocks

There are some awesome options available to highlight code

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 language={lang} value={snippet} />; }, }; const markdown = 'console.log("Hello world!")'; const rootEl = document.getElementById('root'); ReactDOM.render(<Markdown value={markdown} renderer={renderer} />, rootEl);
Recommended