Browse files

Loading files...

README.md

A demo of react-markdown

react-markdown is a markdown component for React.

πŸ‘‰ Changes are re-rendered as you type.

πŸ‘ˆ Try writing some markdown on the left.

Overview

  • Follows CommonMark
  • Optionally follows GitHub Flavored Markdown
  • Renders actual React elements instead of using dangerouslySetInnerHTML
  • Lets you define your own components (to render MyHeading instead of h1)
  • Has a lot of plugins

Table of contents

Syntax highlighting

Here is an example of a plugin to highlight code:
rehype-highlight.

import React from 'react'
import ReactDOM from 'react-dom'
import ReactMarkdown from 'react-markdown'
import rehypeHighlight from 'rehype-highlight'

ReactDOM.render(
  <ReactMarkdown rehypePlugins={[rehypeHighlight]}>{'# Your markdown here'}</ReactMarkdown>,
  document.querySelector('#content')
)

Pretty neat, eh?

GitHub flavored markdown (GFM)

For GFM, you can also use a plugin:
remark-gfm.
It adds support for GitHub-specific extensions to the language:
tables, strikethrough, tasklists, and literal URLs.

These features do not work by default.
πŸ‘† Use the toggle above to add the plugin.

FeatureSupport
CommonMark100%
GFM100% w/ remark-gfm

strikethrough

  • task list
  • checked item

https://example.com

HTML in markdown

⚠️ HTML in markdown is quite unsafe, but if you want to support it, you can
use rehype-raw.
You should probably combine it with
rehype-sanitize.

πŸ‘† Use the toggle above to add the plugin.

Components

You can pass components to change things:

import React from 'react'
import ReactDOM from 'react-dom'
import ReactMarkdown from 'react-markdown'
import MyFancyRule from './components/my-fancy-rule.js'

ReactDOM.render(
  <ReactMarkdown
    components={{
      // Use h2s instead of h1s
      h1: 'h2',
      // Use a component instead of hrs
      hr: ({node, ...props}) => <MyFancyRule {...props} />
    }}
  >
    # Your markdown here
  </ReactMarkdown>,
  document.querySelector('#content')
)

More info?

Much more info is available in the
readme on GitHub!


A component by Espen Hovlandsdal