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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | 2x 2x 2x 2x 2x 2x 2x 2x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 2x 2x 5x 2x 1x 1x 2x 5x 5x 2x 5x | import styled from "styled-components";
import SyntaxHighlighter from "react-syntax-highlighter";
import { CodeDisplayProps, CodeDisplayStyleProps } from "./CodeDisplay.types";
import { useTheme } from "../ThemeProvider/ThemeProvider";
import Text from "../Text/Text";
import { vs, dark } from "react-syntax-highlighter/dist/cjs/styles/hljs";
import { getColorPalette } from "../../helpers/helpers";
import colorTokens from "../../tokens/colors.json";
const CodeDisplay = ({
text,
width = "auto",
title,
style,
codeStyle,
syntaxHighlighterStyle,
language,
color = colorTokens.default.primary.main,
"data-testid": dataTestId,
className,
...props
}: CodeDisplayProps) => {
const theme = useTheme().theme;
const colorPalette = getColorPalette(theme, color);
const appearance = colorPalette![color].appearance
return (
<StyledCodeDisplay
style={style}
$colorPalette={colorPalette}
$color={color}
$width={width}
data-testid={dataTestId}
{...props}
>
{title && (
<StyledTitle $colorPalette={colorPalette} $color={color}>
<Text disableColor variant="paragraph" size="small">
{title}
</Text>
</StyledTitle>
)}
<StyledCodeContainer
$colorPalette={colorPalette}
$color={color}
$hasTitle={!!title}
style={codeStyle}
>
<StyledSyntaxHighlighter
language={language}
title={title}
style={{ ...(appearance === colorTokens.theme.appearance.light ? vs : dark), ...syntaxHighlighterStyle }}
$colorPalette={colorPalette}
$color={color}
>
{text}
</StyledSyntaxHighlighter>
</StyledCodeContainer>
</StyledCodeDisplay>
);
};
export default CodeDisplay;
const StyledCodeDisplay = styled.div<CodeDisplayStyleProps>`
display: flex;
flex-direction: column;
border-radius: 0.5rem;
width: ${(props) => props.$width};
`;
const StyledTitle = styled.div<CodeDisplayStyleProps>`
display: flex;
align-items: center;
padding: 0.5rem 2rem;
background-color: ${(props) =>
props.$colorPalette[props.$color].accentScale[6]};
color: ${(props) => props.$colorPalette[props.$color].accentContrast};
border-radius: 0.5rem 0.5rem 0 0;
`;
const StyledCodeContainer = styled.div<CodeDisplayStyleProps>`
display: block;
background-color: ${(props) =>
props.$colorPalette[props.$color].accentScale[4]};
padding: 1rem 2rem;
pre {
margin: 0;
padding: 0 !important;
white-space: pre-wrap;
word-break: break-word;
code {
font-size: 14px;
font-family: "Source Code Pro", monospace;
}
}
${(props) => {
return `
border-radius: ${props.$hasTitle ? "0 0 0.5rem 0.5rem" : "0.5rem"};
`;
}}
`;
const StyledSyntaxHighlighter = styled(
SyntaxHighlighter
)<CodeDisplayStyleProps>`
background-color: ${(props) =>
props.$colorPalette[props.$color].accentScale[4]} !important;
`;
|