Function SyntaxHighlight

web/components/tools/SyntaxHighlight.tsx:138–161

({
  code,
  lang,
  theme = "github-dark",
  className,
}: SyntaxHighlightProps)

}

export function SyntaxHighlight({
  code,
  lang,
  theme = "github-dark",
  className,
}: SyntaxHighlightProps) {
  const html = useHighlightedCode({ code, lang, theme });

  if (html) {
    return (
      <div
        className={className}
        // shiki wraps output in <pre><code> already
        dangerouslySetInnerHTML={{ __html: html }}
      />
    );
  }

  return (
    <pre className={className}>
      <code>{code}</code>
    </pre>
  );
}