34 lines
868 B
TypeScript
34 lines
868 B
TypeScript
|
import { ReactElement } from "react";
|
||
|
|
import SyntaxHighlighter from "react-syntax-highlighter";
|
||
|
|
import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
|
||
|
|
import { cn } from "@/app/common/utils";
|
||
|
|
import { jetbrainsMono } from "@/app/common/font/font";
|
||
|
|
|
||
|
|
type CodeBlockProps = {
|
||
|
|
/**
|
||
|
|
* The code to highlight.
|
||
|
|
*/
|
||
|
|
code: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function CodeBlock({ code }: CodeBlockProps): ReactElement {
|
||
|
|
return (
|
||
|
|
<SyntaxHighlighter
|
||
|
|
className="break-all !bg-transparent text-xs"
|
||
|
|
style={atomOneDark}
|
||
|
|
wrapLongLines
|
||
|
|
showLineNumbers
|
||
|
|
PreTag={"div"}
|
||
|
|
codeTagProps={{
|
||
|
|
style: {
|
||
|
|
fontFamily: jetbrainsMono.style.fontFamily,
|
||
|
|
fontWeight: jetbrainsMono.style.fontWeight,
|
||
|
|
fontStyle: jetbrainsMono.style.fontStyle,
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{code}
|
||
|
|
</SyntaxHighlighter>
|
||
|
|
);
|
||
|
|
}
|