46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
import Highlight, { defaultProps } from 'prism-react-renderer';
|
|
import dracula from 'prism-react-renderer/themes/github';
|
|
|
|
export default ({ children, className = 'javascript', language }) => {
|
|
const lang = language ? language : className.replace(/language-/, '');
|
|
|
|
return (
|
|
<Highlight
|
|
{...defaultProps}
|
|
theme={dracula}
|
|
code={children}
|
|
language={lang}
|
|
>
|
|
{({ className, style, tokens, getLineProps, getTokenProps }) => (
|
|
<pre
|
|
className={className}
|
|
style={{
|
|
...style,
|
|
overflowX: 'auto',
|
|
padding: 16,
|
|
borderRadius: 4,
|
|
margin: '20px 0 20px 0',
|
|
fontSize: 14,
|
|
}}
|
|
>
|
|
{tokens.map(
|
|
(line, i, lines) =>
|
|
!(
|
|
line.length === 1 &&
|
|
line[0].empty &&
|
|
(i === 0 || i === lines.length - 1)
|
|
) && (
|
|
<div key={i} {...getLineProps({ line, key: i })}>
|
|
{line.map((token, key) => (
|
|
<span key={key} {...getTokenProps({ token, key })} />
|
|
))}
|
|
</div>
|
|
)
|
|
)}
|
|
</pre>
|
|
)}
|
|
</Highlight>
|
|
);
|
|
};
|