1import { ReactNode } from 'react';
2import html from 'remark-html';
3import parse from 'remark-parse';
4import remark2react from 'remark-react';
5import unified from 'unified';
6
7import ImageTag from './tag/ImageTag';
8import PreTag from './tag/PreTag';
9
10type Props = { markdown: string };
11const Content = ({ markdown }: Props) => {
12 const processor = unified()
13 .use(parse)
14 .use(html)
15 .use(remark2react, {
16 remarkReactComponents: {
17 img: ImageTag,
18 pre: PreTag,
19 },
20 });
21
22 const contents: ReactNode = processor.processSync(markdown).contents;
23 return contents;
24};
25
26export default Content;