A demo of 🚀 Markdown Previewer

👉 Changes are re - rendered as you type.

👈 Try writing some markdown on the left.

Table of contents

• Syntax highlighting 💄
• Mermaid Support in 🤖 markdown
• Mathematics ➕➖➗ Katex Equations
• GitHub flavored markdown 👁️ (GFM)
• HTML in markdown
• Components Mapping & Fully Custom Component
• Want Code ?

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? 😁

---

Mermaid Support in 🤖 markdown

---

Mathematics ➕➖➗ Katex Equations

---

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. 🙌 used remarkGfm plugin.

Feature	Support
CommonMark	100%
GFM	100% w/ remark-gfm

• task list
• strikethrough
• checked item
• GFM
• I just love bold text
• Italicized text is the cat's meow.
• This text is really important.
• H₂O X²
• http://www.example.com
• http://www.example.com

The quarterly results look great!

• Revenue was off the chart.

• Profits were higher than ever.

Everything is going according to plan.

---

HTML in markdown

⚠️ HTML in markdown is quite unsafe, but if you want to support it, you can use rehype-raw. I have used to create fully custom component & sanitized with rehype-sanitize You should probably combine it with rehype-sanitize.

👆 Use the toggle above to add the plugin.

Components Mapping & Fully Custom Component

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')
)

Want Code ?

readme on GitHub🙄!

---

Made with ❤️ by Akash 🤓✌️.