react-md-renderer


Simple batteries included rendering library for markdown files.

Features

• :nailcare: Stylized Defaults
  • _Beautiful presentation of your content powered by mui
• :wrench: Easily Customizable
  • Exact same API as markdown-to-jsx
• :art: Syntax Highlighting
  • Powered by react-syntax-highlighter
• :book: Semantic
  • Meaningful html tags representing your content

Getting Started

import { ReactMdRenderer } from 'react-md-renderer/v5';

const MyComponent = () => {
  const options = {
    overrides: {
      img: {
        props: {
          style: {
            maxWidth: '100%',
            height: 'auto',
          },
          align: 'center',
        },
      },
    },
    wrapper: 'article',
    forceBlock: true,
  };

  return (
    <div>
      <ReactMdRenderer options={options}>
        {'# My Markdown Content'}
      </ReactMdRenderer>
    </div>
  );
};

Docs

This component is essentially a custom config of

markdown-to-jsx

. It shares the same API so check out the

markdown-to-jsx

docs for options.

With

@material-ui/core

import { ReactMdRenderer } from 'react-md-renderer/v4';

With

@mui/material

import { ReactMdRenderer } from 'react-md-renderer/v5';