import React from "react"; import SyntaxHighlighter from "react-syntax-highlighter"; import { tomorrowNightBright } from "react-syntax-highlighter/dist/esm/styles/hljs"; import { CopyToClipboard } from "react-copy-to-clipboard"; import IconButton from "@material-ui/core/IconButton"; import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined"; const CodeBlock = (props) => { return ( <div style={{ position: "relative" }}> <CopyToClipboard text={props.content}> <IconButton style={{ position: "absolute", right: 0, top: 0 }} aria-label="copy" component="span" > <FileCopyOutlinedIcon /> </IconButton> </CopyToClipboard> <div style={{ minHeight: 50, backgroundColor: "black", paddingLeft: 15, paddingRight: 50, paddingBottom: 15, paddingTop: 15, }} > <SyntaxHighlighter language="javascript" style={tomorrowNightBright}> {props.content} </SyntaxHighlighter> </div> </div> ); }; export default CodeBlock;