Overview

Markie is a demonstration of react-markdown, a versatile markdown component designed for React applications. Below are some key features of react-markdown:

• It follows the CommonMark standard for Markdown.
• Optionally, it supports GitHub Flavored Markdown (GFM).
• Instead of using dangerouslySetInnerHTML, it renders actual React elements.
• It allows customization of components, enabling the use of custom elements for rendering.
• react-markdown is highly extensible with a wide range of plugins available.

Important Note

• Check out - Landing-Page
• Made By John-Paul

Contents

The content below showcases the usage of various plugins:

• The table of contents is generated dynamically using remark-toc plugin.
• Syntax highlighting is achieved with rehype-highlight.

Syntax Highlighting

Here's an example of syntax highlighting using rehype-highlight:

import React from 'react';
import ReactDOM from 'react-dom';
import Markdown from 'react-markdown';
import rehypeHighlight from 'rehype-highlight';

const markdown = `
# Your markdown here
`;

ReactDOM.render(
  <Markdown rehypePlugins={[rehypeHighlight]}>{markdown}</Markdown>,
  document.querySelector('#content')
);

GitHub Flavored Markdown (GFM)

For GFM support, you can use the remark-gfm plugin. It adds support for GitHub-specific extensions such as tables, strikethrough, task lists, and literal URLs.

HTML in Markdown

HTML in markdown can be risky, but if you need to support it, you can use rehype-raw combined with rehype-sanitize for security.

Components

Custom components can be utilized to modify the rendering behavior:

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={{
      h1: 'h2', // Render h1 as h2
      hr(props) {
        const { node, ...rest } = props;
        return <MyFancyRule {...rest} />;
      }
    }}
  >
    {markdown}
  </Markdown>,
  document.querySelector('#content')
);

Want to Learn More?

For more detailed information, check out the GitHub repository.