Content.tsx

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