42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import type { Language } from 'prism-react-renderer';
|
||
|
|
import Highlight, { defaultProps } from 'prism-react-renderer';
|
||
|
|
import { useCopy } from 'dumi/theme';
|
||
|
|
import 'prismjs/themes/prism.css';
|
||
|
|
import './SourceCode.less';
|
||
|
|
|
||
|
|
export interface ICodeBlockProps {
|
||
|
|
code: string;
|
||
|
|
lang: Language;
|
||
|
|
showCopy?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ({ code, lang, showCopy = true }: ICodeBlockProps) => {
|
||
|
|
const [copyCode, copyStatus] = useCopy();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="__dumi-default-code-block">
|
||
|
|
<Highlight {...defaultProps} code={code} language={lang} theme={undefined}>
|
||
|
|
{({ className, style, tokens, getLineProps, getTokenProps }) => (
|
||
|
|
<pre className={className} style={style}>
|
||
|
|
{showCopy && (
|
||
|
|
<button
|
||
|
|
className="__dumi-default-icon __dumi-default-code-block-copy-btn"
|
||
|
|
data-status={copyStatus}
|
||
|
|
onClick={() => copyCode(code)}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
{tokens.map((line, i) => (
|
||
|
|
<div {...getLineProps({ line, key: i })}>
|
||
|
|
{line.map((token, key) => (
|
||
|
|
<span {...getTokenProps({ token, key })} />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</pre>
|
||
|
|
)}
|
||
|
|
</Highlight>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|