mui-markdown uses markdown-to-jsx and MUI(formerly material-ui) to help you render MD/MDX files with MUI components.
# with npm
npm i mui-markdown
# with yarn
yarn add mui-markdownThe example below will render the h1 tag using MUI Typography component.
import React from 'react';
import MuiMarkdown from 'mui-markdown';
const App = () => {
return <MuiMarkdown>{`# Hello markdown`}</MuiMarkdown>;
};
export default App;Props available for MuiMarkdown component:
| Name | Type | Default | Optional or Mandatory |
|---|---|---|---|
| key | React.key | optional | |
| overrides | MarkdownToJSX.Overrides | optional | |
| options | MarkdownToJSX.Options | optional | |
| disableTableContainer | boolean | false | optional |
| blockquoteBorderColor | string | MUI info color | optional |
| inlineCodeBgColor | string | rgba(127, 127, 127, 0.2) | optional |
| inlineCodeColor | string | currentcolor | optional |
| codeBlockTheme | PrismTheme | vsDark | optional |
You can optionally override a tag to use your component.
example of override with a regular HTML tag:
JS and JSX:
import React from 'react';
import MuiMarkdown from 'mui-markdown';
const App = () => {
return (
<MuiMarkdown
overrides={{
h1: {
component: 'p',
props: {
style: { color: 'red' },
},
},
}}
>
{`# Hello markdown`}
</MuiMarkdown>
);
};
export default App;TS and TSX:
import React from 'react';
import MuiMarkdown from 'mui-markdown';
const App = () => {
return (
<MuiMarkdown
overrides={{
h1: {
component: 'p',
props: {
style: { color: 'red' },
} as React.HTMLProps<HTMLParagraphElement>,
},
}}
>
{`# Hello markdown`}
</MuiMarkdown>
);
};
export default App;example of override with your component:
JS and JSX:
import React from 'react';
import MuiMarkdown from 'mui-markdown';
import CustomTypography from './components/CustomTypography';
const App = () => {
return (
<MuiMarkdown
overrides={{
h1: {
component: CustomTypography,
props: {
// custom props
},
},
}}
>
{`# Hello markdown`}
</MuiMarkdown>
);
};
export default App;TS and TSX:
import React from 'react';
import MuiMarkdown from 'mui-markdown';
import CustomTypography, {
CustomTypographyProps,
} from './components/CustomTypography';
const App = () => {
return (
<MuiMarkdown
overrides={{
h1: {
component: CustomTypography,
props: {
// custom props
} as CustomTypographyProps,
},
}}
>
{`# Hello markdown`}
</MuiMarkdown>
);
};
export default App;You can read about options in the markdown-to-jsx docs.
Note: If you want to override something and also need to set some options, add the overrides property in the options. Don't use overrides and options property together on the MuiMarkdown component.
Optionally you can disable container wrapper around tables. If true, table component will be like this:
<Table>
{children}
<Table>default(false):
<TableContainer component={Paper}>
<Table>
{children}
<Table>
</TableContainer>You can change the blockquote component border color with this property. The default color is theme.palette.info.main
example:
...
<MuiMarkdown blockquoteBorderColor='gold'>
{
`> This is a block of code`
}
</MuiMarkdown>
...This property helps you change the inline code background color.
example:
...
<MuiMarkdown inlineCodeBgColor='gold'>
{
'<p>Install the package via `npm i mui-markdown` or `yarn add mui-markdown`</p>'
}
</MuiMarkdown>
...With this property you're able to change inline code text color.
example:
...
<MuiMarkdown inlineCodeColor='dodgerblue'>
{
'<p>Install the package via `npm i mui-markdown` or `yarn add mui-markdown`</p>'
}
</MuiMarkdown>
...mui-markdown uses prism-react-renderer to highlight code blocks. With this property you can change the highlight theme. Availabe themes are:
- dracula
- duotoneDark
- duotoneLight
- github
- nightOwl
- nightOwlLight
- oceanicNext
- okaidia
- palenight
- shadesOfPurple
- synthwave84
- ultramin
- vsDark
- vsLight
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent