react-md-renderer

react-md-renderer

Simple batteries included rendering library for markdown files.

Features

• :nail_care: 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';