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 BlockQuoteTag from './BlockQuoteTag';
 8import ImageTag from './ImageTag';
 9import PreTag from './PreTag';
10
11type Props = { markdown: string };
12const Content: React.FC<Props> = ({ markdown }: Props) => {
13  const content = unified()
14    .use(parse)
15    .use(html)
16    .use(remark2react, {
17      remarkReactComponents: {
18        img: ImageTag,
19        pre: PreTag,
20        blockquote: BlockQuoteTag,
21      },
22    })
23    .processSync(markdown).result;
24
25  return <>{content}</>;
26};
27
28export default Content;