File size: 854 Bytes
dcedb25 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | import { useMemo } from 'react'
import { cn } from '@/lib/utils'
import { highlightCode } from '@/lib/highlight'
// Highlighted source: the reply code blocks and the artifact panel's Code tab.
// highlightCode returns escaped HTML with hljs-* spans, so injecting it is
// safe; the token colours live in index.css under `.code-highlight`.
export interface CodeBlockProps {
code: string
language?: string | null
className?: string
}
export function CodeBlock({ code, language, className }: CodeBlockProps) {
const { html, language: applied } = useMemo(() => highlightCode(code, language), [code, language])
return (
<code
className={cn('code-highlight block font-mono text-[12.5px] leading-relaxed whitespace-pre', className)}
data-language={applied ?? undefined}
dangerouslySetInnerHTML={{ __html: html }}
/>
)
}
|