-
Notifications
You must be signed in to change notification settings - Fork 55
/
code.js
59 lines (55 loc) · 1.6 KB
/
code.js
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import { Absolute, Box, Relative, Text } from '@primer/components'
import Highlight, { defaultProps } from 'prism-react-renderer'
import Prism from '../prism'
import githubTheme from '../github'
import React from 'react'
import ClipboardCopy from './clipboard-copy'
import LiveCode from './live-code'
function Code({className, children, live, noinline}) {
const language = className ? className.replace(/language-/, '') : ''
const code = children.trim()
if (live) {
return <LiveCode code={code} language={language} noinline={noinline} />
}
return (
<Relative>
<Absolute top={0} right={0} p={2}>
<ClipboardCopy value={code} />
</Absolute>
<Highlight
{...defaultProps}
Prism={Prism}
code={code}
language={language}
theme={githubTheme}
>
{({className, style, tokens, getLineProps, getTokenProps}) => (
<Box
as="pre"
className={className}
mt={0}
mb={3}
p={3}
border={0}
style={{...style, overflow: 'auto'}}
sx={{borderRadius: 2}}
>
{tokens.map((line, i) => (
<div key={i} {...getLineProps({line, key: i})}>
{line.map((token, key) => (
<Text
key={key}
fontFamily="mono"
fontSize={1}
{...getTokenProps({token, key})}
/>
))}
</div>
))}
</Box>
)}
</Highlight>
</Relative>
)
}
export default Code