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

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-starry-night.

import React from 'react';
import ReactDom from 'react-dom';
import { MarkdownHooks } from 'react-markdown';
import rehypeStarryNight from 'rehype-starry-night';

const markdown = `
# Your markdown here
`;

ReactDom.render(
	<MarkdownHooks rehypePlugins={[rehypeStarryNight]}>{markdown}</MarkdownHooks>,
	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