Function useCodeHighlight

apps/ray/src/hooks/use-code-highlight.ts:65–128

({
  code,
  language,
  theme,
}: UseCodeHighlightProps)

}

export function useCodeHighlight({
  code,
  language,
  theme,
}: UseCodeHighlightProps) {
  const [html, setHtml] = useState(() => getCachedHtml(code, language) ?? "");
  const [loading, setLoading] = useState(() => !getCachedHtml(code, language));
  const prevThemeRef = useRef(theme);

  const cssVariables = useMemo(() => {
    const vars = theme.variables;
    return Object.entries(vars)
      .map(([key, value]) => `${key}: ${value};`)
      .join("\n");
  }, [theme.variables]);

  useEffect(() => {
    prevThemeRef.current = theme;
  }, [theme]);

  useEffect(() => {
    let cancelled = false;

    const highlight = async () => {
      const cached = getCachedHtml(code, language);
      if (!cached) setLoading(true);

      try {
        const result = await codeToHtml(code, {
          lang: language as Parameters<typeof codeToHtml>[1]["lang"],
          theme: shikiTheme,
          transformers: [
            transformerNotationDiff(),
            transformerNotationHighlight(),
            transformerNotationWordHighlight(),
            transformerNotationFocus(),
            transformerNotationErrorLevel(),
          ],
        });
        if (!cancelled) {
          const processed = result.replace(
            /<pre([^>]*)>/g,
            '<pre$1 style="background: transparent; margin: 0; overflow-x: auto;">',
          );
          setHtml(processed);
          setLoading(false);
          setCachedHtml(code, language, processed);
        }
      } catch {
        if (!cancelled) {
          setHtml(`<pre><code>${code}</code></pre>`);
          setLoading(false);
        }
      }
    };

    highlight();
    return () => {