Function useHighlighted

packages/react/src/components/code-block.tsx:66–79

(code: string, lang: string, theme?: ShikiThemeProp)

// ---------------------------------------------------------------------------

function useHighlighted(code: string, lang: string, theme?: ShikiThemeProp): ReactNode | null {
  const [, setTick] = useState(0);
  const resolvedLang = (resolveLang(lang) ?? "json") as Parameters<typeof ensureLang>[0];

  const isReady = ensureLang(resolvedLang, () => setTick((t) => t + 1));

  if (!isReady) return null;

  const highlighter = getHighlighter();
  // Dual-theme light-dark() colors: the markup is correct in BOTH color
  // schemes, so SSR/hydration can't paint the wrong palette first.
  const hast = highlighter.codeToHast(code, { lang: resolvedLang, ...dualThemeOptions(theme) });
  return toJsxRuntime(hast, { jsx, jsxs, Fragment });
}

// ---------------------------------------------------------------------------
// CodeBlock