1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
import React, { createElement, Fragment, useEffect, useState } from 'react';
import rehypeReact from 'rehype-react';
import gemoji from 'remark-gemoji';
import html from 'remark-html';
import parse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import { unified } from 'unified';
import AnchorTag from './AnchorTag';
import BlockQuoteTag from './BlockQuoteTag';
import ImageTag from './ImageTag';
import PreTag from './PreTag';
type Props = { markdown: string };
const Content: React.FC<Props> = ({ markdown }: Props) => {
const [Content, setContent] = useState(<></>);
useEffect(() => {
unified()
.use(parse)
.use(gemoji)
.use(html)
.use(remarkRehype)
.use(rehypeReact, {
createElement,
Fragment,
components: {
img: ImageTag,
pre: PreTag,
a: AnchorTag,
blockquote: BlockQuoteTag,
},
})
.process(markdown)
.then((file) => {
setContent(file.result);
});
}, [markdown]);
return Content;
};
export default Content;
|
