index.tsx

 1import React from 'react';
 2import gemoji from 'remark-gemoji';
 3import html from 'remark-html';
 4import parse from 'remark-parse';
 5import remark2react from 'remark-react';
 6import unified from 'unified';
 7
 8import AnchorTag from './AnchorTag';
 9import BlockQuoteTag from './BlockQuoteTag';
10import ImageTag from './ImageTag';
11import PreTag from './PreTag';
12
13type Props = { markdown: string };
14const Content: React.FC<Props> = ({ markdown }: Props) => {
15  const content = unified()
16    .use(parse)
17    .use(gemoji)
18    .use(html)
19    .use(remark2react, {
20      remarkReactComponents: {
21        img: ImageTag,
22        pre: PreTag,
23        a: AnchorTag,
24        blockquote: BlockQuoteTag,
25      },
26    })
27    .processSync(markdown).result;
28
29  return <>{content}</>;
30};
31
32export default Content;