-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.tsx
40 lines (36 loc) · 1.04 KB
/
demo.tsx
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
import * as React from 'react';
import Highligh, {defaultProps} from 'prism-react-renderer';
import {useState} from 'react';
interface Props {
code: string
}
const Demo: React.FunctionComponent<Props> = (props) => {
const [codeVisible, setCodeVisible] = useState(false);
const code = (<Highligh {...defaultProps} code={props.code} language="jsx">
{
({className, style, tokens, getLineProps, getTokenProps}) => (
<pre className={className} style={style}>
{tokens.map((line, i) => (
<div {...getLineProps({line, key: i})}>
{line.map((token, key) => (
<span {...getTokenProps({token, key})}/>
))}
</div>
))}
</pre>
)
}
</Highligh>);
return (
<div>
<div className="example">
{props.children}
</div>
<div>
<button onClick={() => setCodeVisible(!codeVisible)}>查看代码</button>
{codeVisible && code}
</div>
</div>
);
};
export default Demo;