36 lines
972 B
TypeScript

import { CopyButton } from "@/components/CopyButton";
import type { StringLiteralUnion } from "shikiji";
import { getHighlighter } from "shikiji";
export async function CodeBlock(props: {
code: string;
lang: StringLiteralUnion<string>;
}) {
const highlighter = await getHighlighter({
themes: ["one-dark-pro"],
langs: [props.lang],
});
return (
<div className="relative w-full text-sm">
{/* max-w-[calc(32rem-1.5rem-1.5rem)] */}
{/* <div className=""> */}
<p
// tabIndex={1}
className="[&>pre]:p-4 rounded-lg max-h-96 overflow-auto w-full"
style={{
overflowWrap: "break-word",
}}
dangerouslySetInnerHTML={{
__html: highlighter.codeToHtml(props.code.trim(), {
lang: props.lang,
theme: "one-dark-pro",
}),
}}
/>
{/* </div> */}
<CopyButton className="absolute right-2 top-2" text={props.code} />
</div>
);
}