h1 Heading 8-)

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

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

Hello

Contents

Here is an example of a plugin in action (remark-toc). This section is replaced by an actual 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 Markdown from 'react-markdown'
import rehypeHighlight from 'rehype-highlight'

const markdown = `
# Your markdown here
`

ReactDOM.render(
  <Markdown rehypePlugins={[rehypeHighlight]}>{markdown}</Markdown>,
  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.

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 Markdown from 'react-markdown'
import MyFancyRule from './components/my-fancy-rule.js'

const markdown = `
# Your markdown here
`

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

More info?

Much more info is available in the readme on GitHub!

A component by Espen Hovlandsdal

Huy Ngo

Senior Technical Lead