IT Tools

Handy tools for developer

CSS to JS

CSS to Template

Search

Ctrl + K
Editor
Preview

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

Syntax highlighting

Here is an example code:

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.

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.

More info?

Much more info is available in the readme on GitHub!

A component by Espen Hovlandsdal