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
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 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.
โ ๏ธ 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')
)
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
dangerouslySetInnerHTML
MyHeading
instead ofh1
)Table of 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
.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.
remark-gfm
strikethroughhttps://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 withrehype-sanitize
.Components
You can pass components to change things:
More info?
Much more info is available in the readme on GitHub!
A component by Espen Hovlandsdal