Content.tsx

 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;