React-markdown Example
28 Feb 2025
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
MyHeadinginstead 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.
| Feature | Support |
|---|---|
| CommonMark | 100% |
| GFM | 100% w/ remark-gfm |
- task list
- checked item
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
