# Code Block

- Page: https://jiguang132.com/resources/beautiful-ui/docs/code-block
- Resource: Beautiful UI (https://jiguang132.com/resources/beautiful-ui.md)
- All guides: https://jiguang132.com/resources/beautiful-ui/docs.md

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


## When to use

Present source lines or a unified diff with a clipboard action.

## Key props and data

| Native prop | Meaning |
|---|---|
| `variant` | Code renders line-numbered text; Diff renders old/new gutters. |
| `lines` | Text displayed in the Code view. |
| `code` | Overrides copied raw text; it does not override displayed lines. |
| `diff` | Rows supply old/cur, ctx/add/del type and pieces with optional change. |
| `filename` | Visible file label. |
| `onCopy` | Receives text only after the browser confirms a successful copy. |

## Interaction and state checks

Keep code and lines consistent unless different copied output is deliberate. Check Code/Diff, clipboard success and denied permission; failure shows an error instead of success.

## Integration boundaries

Clipboard access depends on browser permissions and a secure context. No syntax-highlighting language or code-execution API is supplied.

The runnable usage and source reference below preserve the native API. These practical guides do not claim a full translation of upstream prose.


## Runnable usage

Install a complete example below first, then import its installed entry. Parameterized example source, shared helpers, native components and CSS are included; no manual relative-import edits are required.

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

```


## Preview states

Code, Diff, Source code, Code changes

Demo state and mock data do not provide a backend service. Inspect the component props before wiring real data.

A line-numbered listing and a unified diff.



## Complete example installation

These are runnable native states and parameterized usage scenarios, not additional components. Each bundle includes its source closure, helpers, pinned dependencies, independent CSS and licenses. Scenario names are not new native component props; consult the source API below.

### Code

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

Default import: `@/components/beautiful-ui/examples/presets/code-block-code`

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

### Diff

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

Default import: `@/components/beautiful-ui/examples/presets/code-block-diff`

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

### Source code

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

Default import: `@/components/beautiful-ui/examples/presets/code-block-source-code`

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

### Code changes

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

Default import: `@/components/beautiful-ui/examples/presets/code-block-code-changes`

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

Initialize Tailwind CSS v4, import beautiful-ui.css once and synchronize theme with the host html dark class. Examples read html lang for Chinese/English and do not supply backend, authentication or recording. Network/clipboard availability still depends on the browser.


## Source-backed parameter reference

Implementation signatures and types are generated from the pinned local source. Optional props, native inherited types, union branches and never exclusions are preserved. A forwardRef implementation's ref is a React reference, not an additional business prop.


```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;
};
```


### Destructuring defaults in source

Only defaults written directly in parameter/props destructuring are listed. Conditional expressions, runtime theme and computed values require source inspection; this is not an exhaustive behavior-default list.


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

// CodeBlock
lines = CODE_LINES

// CodeBlock
diff = DIFF

// CodeBlock
filename = FILE
```


### Native and external types

External types remain defined by React or native dependencies, not manually expanded into guessed props. The installed version's TypeScript definitions are authoritative.


```ts
Partial<CodeBlockLabels>
```

---

Index of all JGuang resources: https://jiguang132.com/llms.txt