34 lines
776 B
TypeScript
34 lines
776 B
TypeScript
|
import { ReactElement } from "react";
|
||
|
|
import SyntaxHighlighter from "react-syntax-highlighter";
|
||
|
|
import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
|
||
|
|
|
||
|
|
type CodeHighlighterProps = {
|
||
|
|
/**
|
||
|
|
* The code to highlight.
|
||
|
|
*/
|
||
|
|
code: string;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Should the element be rounded?
|
||
|
|
*/
|
||
|
|
rounded?: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function CodeHighlighter({ code, rounded = true }: CodeHighlighterProps): ReactElement {
|
||
|
|
return (
|
||
|
|
<SyntaxHighlighter
|
||
|
|
language="json"
|
||
|
|
style={atomOneDark}
|
||
|
|
wrapLongLines
|
||
|
|
customStyle={{
|
||
|
|
maxHeight: "600px",
|
||
|
|
backgroundColor: "hsl(var(--popover))",
|
||
|
|
wordBreak: "break-all",
|
||
|
|
borderRadius: rounded ? "0.75rem" : undefined,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{code}
|
||
|
|
</SyntaxHighlighter>
|
||
|
|
);
|
||
|
|
}
|