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