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;