in theme/src/components/code.js [9:54]
function Code({className, children, live, noinline, metastring}) {
const language = className ? className.replace(/language-/, '') : ''
const code = children.trim()
if (live) {
return <LiveCode code={code} language={language} noinline={noinline} metastring={metastring} />
}
return (
<Relative
sx={{
// Make <pre> adjust to the width of the container
// https://stackoverflow.com/a/14406386
display: 'table',
tableLayout: 'fixed',
width: '100%'
}}
>
<Absolute sx={{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>
)
}