Function HighlightCode

src/components/code/highlight-code.tsx:15–46

({ code, options, className, withCopy = true }: HighlightCodeProps)

});

export function HighlightCode({ code, options, className, withCopy = true }: HighlightCodeProps) {
	const { copyFn } = useCopyToClipboard();
	const [hovered, setHovered] = useState(false);
	const { themeMode } = useSettings();

	return (
		<div className={cn("w-full relative group", className)} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>
			{withCopy && hovered && (
				<Button variant="outline" size="icon" className="absolute top-2 right-2 bg-accent" onClick={() => copyFn(code)}>
					<Icon icon="eva:copy-fill" size={24} />
				</Button>
			)}
			<div
				// biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
				dangerouslySetInnerHTML={{
					__html: highlighter.codeToHtml(code, {
						lang: options?.lang || "typescript",
						theme: options?.theme || (themeMode === "dark" ? "min-dark" : "snazzy-light"),
						transformers: [
							{
								pre(node) {
									this.addClassToHast(node, "p-3 rounded-md");
								},
							},
						],
						...options,
					}),
				}}
			/>
		</div>
	);
}