Function useHighlightedCode

web/components/tools/SyntaxHighlight.tsx:99–129

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

}

export function useHighlightedCode({
  code,
  lang,
  theme = "github-dark",
}: UseHighlightedCodeOptions): string | null {
  const [html, setHtml] = useState<string | null>(null);
  const lastKey = useRef<string>("");
  const key = `${lang}:${theme}:${code}`;

  useEffect(() => {
    if (lastKey.current === key) return;
    lastKey.current = key;

    let cancelled = false;
    getHighlighter().then((hl) => {
      if (cancelled) return;
      try {
        const highlighted = hl.codeToHtml(code, { lang, theme });
        if (!cancelled) setHtml(highlighted);
      } catch {
        // Language not supported — fall back to plain
        if (!cancelled) setHtml(null);
      }
    });
    return () => {
      cancelled = true;
    };
  }, [key, code, lang, theme]);

  return html;
}

interface SyntaxHighlightProps {
  code: string;