Function CodeBlock

packages/docs/src/components/code-block.client.tsx:15–43

({
  code,
  lang = 'tsx',
  compact = false,
  preHighlighted = false,
  ...props
}: CodeBlockProps)

const importHighlight = import('./code-block-highlighter')

export function CodeBlock({
  code,
  lang = 'tsx',
  compact = false,
  preHighlighted = false,
  ...props
}: CodeBlockProps) {
  const [html, setHtml] = useState<string | null>(null)
  const { highlight, renderCodeSkeleton } = use(importHighlight)
  useEffect(() => {
    ;(async () => {
      const x = preHighlighted ? code : await highlight(code, lang)
      setHtml(x)
    })()
  }, [code, lang, highlight, preHighlighted])
  return (
    <FumaDocsCodeBlock
      // @ts-expect-error
      custom={compact ? 'compact' : undefined}
      {...props}
    >
      <Pre
        dangerouslySetInnerHTML={{
          __html: html ?? renderCodeSkeleton(code)
        }}
      />
    </FumaDocsCodeBlock>
  )
}