# 代码块

- 页面: https://jiguang132.com/zh/resources/beautiful-ui/docs/code-block
- 资源: Beautiful UI (https://jiguang132.com/zh/resources/beautiful-ui.md)
- 全部指南: https://jiguang132.com/zh/resources/beautiful-ui/docs.md

Beautiful UI 的独立组件，请不要替换为 JGuang UI/Base UI 的同名 API。

## 安装

```bash
npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/code-block.json
```

Registry 将复制可编辑源码和依赖到独立命名空间。检查主题变量与 Tailwind CSS v4 配置；不要覆盖已有的项目组件。

## 使用与验证

在左侧选择组件，在预览中操作它的状态；使用“查看代码”检查真实源码。安装后执行类型检查和构建，再验证键盘焦点、手机布局与深浅色主题。

## 来源

https://github.com/slev12397/beautiful-ui/tree/44a274e598395ab61e7c96c26fda2758780253b7
MIT 许可证；不包括付费内容。下方提供上游英文参考内容，中文使用指南已适配；上游详细参考暂保留英文。

---



## 适用场景

展示源码行或统一差异，并提供复制操作。

## 关键参数与数据

| 原生参数 | 说明 |
|---|---|
| `variant` | Code 显示带行号的文本，Diff 显示新旧行号。 |
| `lines` | Code 视图展示的文本行。 |
| `code` | 覆盖复制的原始文本，不会覆盖展示的 lines。 |
| `diff` | 每行包含 old/cur、ctx/add/del 类型、pieces 与可选 change。 |
| `filename` | 展示的文件名。 |
| `onCopy` | 浏览器确认复制成功后才接收复制文字。 |

## 交互与状态检查

除非有意复制不同内容，否则保持 code 与 lines 一致。检查 Code/Diff、复制成功和权限拒绝；失败会展示错误，不会报告成功。

## 业务接入边界

剪贴板访问受浏览器权限和安全上下文限制。不提供语法高亮语言配置或代码执行接口。

以下安装用法和源码参数参考保留原生 API 名称。上游英文参考未宣称全文中文化。


## 可运行用法

先安装下方完整示例，再使用已安装的示例入口。参数化示例、共享工具、原生组件和 CSS 均随安装包提供，不需要手工修正相对导入。

```tsx
import Demo from '@/components/beautiful-ui/examples/presets/code-block-source-code';
import '@/styles/beautiful-ui.css';
export default function Example() { return <Demo />; }

```


## 可用状态与示例

代码、差异、代码展示与复制、代码差异

组件中的状态与数据为演示用途，不包含后端接口。接入实际项目时请检查源码中的公开参数，再连接业务数据。
A line-numbered listing and a unified diff.



## 完整示例安装

这些是实际运行的原生状态和参数化业务示例，不是额外的独立组件。每份包包含必要源码、辅助文件、固定依赖、独立 CSS 和许可证。业务示例选择名不是新增的原生组件属性；真实 API 见下方参数参考。

### 代码

```bash
npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/examples/code-block/code-block-code.json
```

默认导入: `@/components/beautiful-ui/examples/presets/code-block-code`

依赖: `clsx@2.1.1`, `tailwind-merge@3.6.0`, `shadow-plugin@2.1.1`

### 差异

```bash
npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/examples/code-block/code-block-diff.json
```

默认导入: `@/components/beautiful-ui/examples/presets/code-block-diff`

依赖: `clsx@2.1.1`, `tailwind-merge@3.6.0`, `shadow-plugin@2.1.1`

### 代码展示与复制

```bash
npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/examples/code-block/code-block-source-code.json
```

默认导入: `@/components/beautiful-ui/examples/presets/code-block-source-code`

依赖: `clsx@2.1.1`, `tailwind-merge@3.6.0`, `shadow-plugin@2.1.1`

### 代码差异

```bash
npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/examples/code-block/code-block-code-changes.json
```

默认导入: `@/components/beautiful-ui/examples/presets/code-block-code-changes`

依赖: `clsx@2.1.1`, `tailwind-merge@3.6.0`, `shadow-plugin@2.1.1`

入口初始化 Tailwind CSS v4，导入 beautiful-ui.css 一次，并由宿主 html 的 dark 类同步主题。示例按 html lang 选择中英文，不包含后端、认证或录屏。网络/剪贴板权限仍取决于浏览器。


## 源码参数参考

以下实现签名和类型从本地固定版本源码生成。保留可选属性、原生继承类型、联合分支和 never 限制；不会将其他设计系统的 API 混入。forwardRef 实现中的 ref 属于 React 引用，不是新增业务属性。此区域是原始类型参考，不是上游说明的全文翻译。


```ts
CodeBlock({
  variant = "Code",
  lines = CODE_LINES,
  code,
  diff = DIFF,
  filename = FILE,
  labels,
  onCopy,
}: CodeBlockProps)
```



```ts
export type CodePiece = { text: string; change?: "add" | "del" };

export type DiffRow = {
  old: number | null;
  cur: number | null;
  type: "ctx" | "add" | "del";
  pieces: CodePiece[];
};

export type CodeBlockLabels = { copy: string; copied: string };

export type CodeBlockProps = {
  /** Which view to render — "Code" (line-numbered listing) or "Diff". */
  variant?: string;
  /** The lines shown in the Code view. */
  lines?: string[];
  /** Raw text placed on the clipboard by Copy. Defaults to `lines` joined. */
  code?: string;
  /** The unified-diff rows shown in the Diff view. */
  diff?: DiffRow[];
  /** Filename shown in the header. */
  filename?: string;
  /** Prominent copy strings. */
  labels?: Partial<CodeBlockLabels>;
  /** Called with the copied text after a successful copy. */
  onCopy?: (text: string) => void;
};
```


### 源码中的解构默认值

只列出直接写在参数或 props 解构中的默认表达式。条件表达式、运行时主题和其他计算值请结合源码；这里不是全部行为的默认值清单。


```ts
// CodeBlock
variant = "Code"

// CodeBlock
lines = CODE_LINES

// CodeBlock
diff = DIFF

// CodeBlock
filename = FILE
```


### 原生与外部类型

以下外部类型仍由 React 或资源自身依赖定义，没有手工展开为虚构属性。实际可用类型以安装版本的 TypeScript 检查为准。


```ts
Partial<CodeBlockLabels>
```

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt