React Markdown + MUI v5 (Material-UI)

Table of Contents

• About this post
• Using Markdown in your project
• About "mui-markdown" package
• Some of "mui-markdown" features
• Package usage
• Documentations

About This Post

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.

Using Markdown in your project

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.

About "mui-markdown" package

"mui-markdown" uses "markdown-to-jsx" and "mui". I found these two working together really simple and nice. This package will be great for you if you use MUI (Formerly Material-UI). Also it is really lightweight, just 11.70Kb (Unpacked size is 87.1Kb).

Some of "mui-markdown" features

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

Package usage

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;

Docs

To get more familiar with this package you can read the documentation on GitHub or NPM.

---

Hi! I'm Hosein Pouyanmehr. I enjoy sharing what I learn and what I find interesting. Let's connect on LinkedIn.

See my code interests on GitHub.

Comments

[node.js.developers.kh]

Hi Hosein

Just came from the future. I was coding and testing until I realized that OK, the lib won't highlight my code, so at first I thought it is a kind of bug but then I went to the official doc and learned that you need to install prism-react-renderer to have that feature. For more info

[Hosein Pouyanmehr]

Hey,

Yes, from version 1.0.0 of the mui-markdown package, You need to install prism-react-renderer if you need the syntax highlighter. The reason is to keep the package size as small as possible for those who don't need this extra feature (It's an optional dependency now. Issue).

Thanks for mentioning this update on the package. I'll update the blog post soon to avoid further confusion.

[node.js.developers.kh]

Hi Hosein Pouyanmehr

Thanks for the lib, BTW is it a good idea to write post's content in markdown and use this lib to cenvert it to MUI? I mean fetching data from backend and then use your lib to render it to the user?

Let's say that we upload pic and video or mp3 somewhere else and put the link in markdown

[Hosein Pouyanmehr]

Hey,
You're welcome.

Yes, it's a good idea to keep the data structure as simple as possible, and using markdown helps you to have all of your content in just one string.

These tips may also help you:

• You can create a gallery-like feature for your app to upload the media there and then use the file link in your MD or MDX.
• By using mui-markdown you'll be able to change your UI and the rendered shape from a single point. Also you can have the global MUI's theme configs there.
• You can write your content much faster using MD.
• You can set up the whole page using meta data in your md, not just the content or post.