50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
|
import * as React from 'react';
|
||
|
|
import ReactMarkdown from 'markdown-to-jsx';
|
||
|
|
import Box from '@mui/material/Box';
|
||
|
|
import Typography from '@mui/material/Typography';
|
||
|
|
import Link from '@mui/material/Link';
|
||
|
|
|
||
|
|
const options = {
|
||
|
|
overrides: {
|
||
|
|
h1: {
|
||
|
|
component: Typography,
|
||
|
|
props: {
|
||
|
|
gutterBottom: true,
|
||
|
|
variant: 'h4',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
h2: {
|
||
|
|
component: Typography,
|
||
|
|
props: { gutterBottom: true, variant: 'h6' },
|
||
|
|
},
|
||
|
|
h3: {
|
||
|
|
component: Typography,
|
||
|
|
props: { gutterBottom: true, variant: 'subtitle1' },
|
||
|
|
},
|
||
|
|
h4: {
|
||
|
|
component: Typography,
|
||
|
|
props: {
|
||
|
|
gutterBottom: true,
|
||
|
|
variant: 'caption',
|
||
|
|
paragraph: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
p: {
|
||
|
|
component: Typography,
|
||
|
|
props: { paragraph: true },
|
||
|
|
},
|
||
|
|
a: { component: Link },
|
||
|
|
li: {
|
||
|
|
component: (props: any) => (
|
||
|
|
<Box component="li" sx={{ mt: 1 }}>
|
||
|
|
<Typography component="span" {...props} />
|
||
|
|
</Box>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function Markdown(props: any) {
|
||
|
|
return <ReactMarkdown options={options} {...props} />;
|
||
|
|
}
|