Function code

web/components/PageRenderer.tsx:84–126

({ children, className, ...props })

    );
  },
  code({ children, className, ...props }) {
    // react-markdown v9 移除了 inline prop。需要自己判断：
    //   1) 带 language- className → 一定是 fenced code block
    //   2) children 含换行 → 即使 fenced code 不带语言也是 block
    //   3) 否则才是 inline code（单反引号 `...` 形式）
    // 之前的 `inline = !className` 错判：fenced code 不指定语言时 className 也是
    // undefined，被当成 inline 渲染，于是每行套了浅底样式与黑色 pre 容器分离。
    const childText =
      typeof children === "string"
        ? children
        : Array.isArray(children)
        ? children.join("")
        : "";
    const hasLanguage = !!className && /\blanguage-/.test(className);
    const isBlock = hasLanguage || childText.includes("\n");

    if (!isBlock) {
      // inline code：浅灰底 + 前景色字
      return (
        <code
          className="rounded bg-muted px-1 py-0.5 font-mono text-sm text-foreground"
          {...props}
        >
          {children}
        </code>
      );
    }

    // fenced code block 内的 <code>：让 pre 提供背景，code 自己只负责字色，
    // 强制透明背景 + 0 padding 防止 typography / 其它来源的样式渗入。
    // 末行若是下沉的代码块锚点（^c-...，见 relocateCodeFenceAnchors），抽成 id 让
    // [[raw/...#^c-...]] 引用能 HashScroller 跳转，并从可见代码里剥掉锚点噪音。
    const { display, id } = extractCodeBlockAnchor(childText);
    return (
      <code
        id={id}
        className={`${className ?? ""} !bg-transparent !p-0 !text-zinc-100`}
        {...props}
      >
        {display}
      </code>
    );
  },
};

/**