frontend/components/Markdown/index.tsx (view raw)
1import {styled} from '@mui/material/styles';
2import Typography, {TypographyProps} from '@mui/material/Typography';
3import {marked} from 'marked';
4
5const Markdown = (props: TypographyProps) => {
6 const {children, ...typographyProps} = props;
7
8 if (!children) return null;
9
10 const htmlContent = marked(children).replace(/\<\/?p\>/g, '');
11
12 return (
13 <Text
14 {...typographyProps}
15 dangerouslySetInnerHTML={{
16 __html: htmlContent,
17 }}
18 />
19 );
20};
21
22const Text = styled(Typography)(({theme}) => ({
23 '& > *:first-child': {
24 marginTop: 0,
25 },
26}));
27
28export default Markdown;