React Markdown + MUI v5(Material-UI)

Are you going to use markdown in your React web app? In this post, I want to introduce my new package to you. That will help you to render the markdown fast and nicely.

As you know, with MD or MDX you can write rich formatted content real quick, and it's pretty readable even before you convert it to HTML. There are also some other benefits that you can read about them as well.
So, if we are all in the same boat, chances are that like me, you need to use markdown in almost every single project. Even though you can find some npm or yarn packages that help you to render markdown as you wish, almost every time you need to configure that or write some extra CSS to gain the style you want.

• Code highlight and language detect
• Inline code highlight
• Blockquote component
• MUI button component support
• Nice Links
• Flexible and Overridable

The package is available on npm and yarn.

To install it, simply run:

# with npm
npm i mui-markdown

# with yarn
yarn add mui-markdown

Then pass the markdown as children:

import React from 'react';
import MuiMarkdown from 'mui-markdown';

import md from './myMarkdown.md';

const App = () => {
  return(
      <MuiMarkdown>{md}</MuiMarkdown>;
  )
};

export default App;