Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | import {Absolute, BorderBox, Relative, Text} from '@primer/components'
import Highlight, {defaultProps} from 'prism-react-renderer'
import githubTheme from 'prism-react-renderer/themes/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}
code={code}
language={language}
theme={githubTheme}
>
{({className, style, tokens, getLineProps, getTokenProps}) => (
<BorderBox
as="pre"
className={className}
mt={0}
mb={3}
p={3}
border={0}
style={{...style, overflow: 'auto'}}
>
{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>
))}
</BorderBox>
)}
</Highlight>
</Relative>
)
}
export default Code
|