Function CodeBlock

apps/docs/src/components/code-block.tsx:112–283

({
  snippet,
  lang,
  showLineNumbers,
  highlightLines,
  highlightWords
}: PropsType)

}

export function CodeBlock({
  snippet,
  lang,
  showLineNumbers,
  highlightLines,
  highlightWords
}: PropsType) {
  const { resolvedTheme } = useTheme();
  const isDark = resolvedTheme === "dark";

  const lineBg = isDark
    ? "rgba(94, 132, 252, 0.15)"
    : "rgba(55, 88, 249, 0.08)";
  const lineBorder = isDark ? "#5e84fc" : "#3758f9";
  const wordBg = isDark
    ? "rgba(94, 132, 252, 0.25)"
    : "rgba(55, 88, 249, 0.15)";

  const highlightedLines = useMemo(
    () => expandLineRanges(highlightLines || []),
    [highlightLines]
  );

  const wordPattern = useMemo(
    () => buildUnionPattern(highlightWords),
    [highlightWords]
  );

  const hasInlineHighlight = !!wordPattern;
  const hasLineHighlight = highlightedLines.size > 0;

  const linePosition = useMemo(() => {
    const sorted = [...highlightedLines].sort((a, b) => a - b);
    const map = new Map<number, "single" | "first" | "mid" | "last">();
    const len = sorted.length;
    if (len === 0) return map;

    for (let i = 0; i < len; i++) {
      const cur = sorted[i]!;
      const isStart = i === 0 || sorted[i - 1]! !== cur - 1;
      const isEnd = i === len - 1 || sorted[i + 1]! !== cur + 1;

      if (isStart && isEnd) {
        map.set(cur, "single");
      } else if (isStart) {
        map.set(cur, "first");
      } else if (isEnd) {
        map.set(cur, "last");
      } else {
        map.set(cur, "mid");
      }
    }

    return map;
  }, [highlightedLines]);

  const lineProps = useMemo(() => {
    if (!hasLineHighlight) return undefined;