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.
Top comments (4)
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 infoHey,
Yes, from version 1.0.0 of the
mui-markdown
package, You need to installprism-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.
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
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:
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.