Get Started

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

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

strikethrough

• 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.

Components

You can pass components to change things:

package main

import "fmt"

func main() {

    fmt.Println("go" + "lang")

    fmt.Println("1+1 =", 1+1)
    fmt.Println("7.0/3.0 =", 7.0/3.0)

    fmt.Println(true && false)
    fmt.Println(true || false)
    fmt.Println(!true)
}

More info?

Much more info is available in the readme on GitHub!

---

A component by Espen Hovlandsdal