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