Blog image

Test MD Post

Anon Factos

Anon Factos

react-markdown

Build Coverage Downloads Size Sponsors Backers Chat

React component to render markdown.

Feature highlights

  • [x] safe by default (no dangerouslySetInnerHTML or XSS attacks)
  • [x] components (pass your own component to use instead of <h2> for ## hi)
  • [x] plugins (many plugins you can pick and choose from)
  • [x] compliant (100% to CommonMark, 100% to GFM with a plugin)

Contents

Install

This package is ESM only. In Node.js (version 16+), install with npm:

npm install react-markdown

In Deno with esm.sh:

import Markdown from 'https://esm.sh/react-markdown@9'

In browsers with esm.sh:

<script type="module">
  import Markdown from 'https://esm.sh/react-markdown@9?bundle'
</script>

Use

A basic hello world:

import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'

const markdown = '# Hi, *Pluto*!'

createRoot(document.body).render(<Markdown>{markdown}</Markdown>)

Show equivalent JSX

<h1>
  Hi, <em>Pluto</em>!
</h1>

Here is an example that shows how to use a plugin (remark-gfm, which adds support for footnotes, strikethrough, tables, tasklists and URLs directly):

import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

const markdown = `Just a link: www.nasa.gov.`

createRoot(document.body).render(
  <Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown>
)

Links