index.tsx

 1import React 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 './ImageTag';
 8import PreTag from './PreTag';
 9
10type Props = { markdown: string };
11const Content: React.FC<Props> = ({ 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: React.ReactNode = processor.processSync(markdown).contents;
23  return <>{contents}</>;
24};
25
26export default Content;