Code 代码Code · CodeBlock

Code 用来在句子里标出一个标识符、命令或取值；CodeBlock 展示成段的代码，带复制按钮。两者都只做等宽排版，不做语法高亮。

行内代码

运行 npm install oink-ui 安装，然后在入口文件里 import 'oink-ui/styles.css'。

代码块

代码可以用 code 属性传，也可以写在 children 里。language 显示在左上角，title 通常放文件名。右上角的按钮把全部代码复制到剪贴板，成功后图标变成对勾两秒。

SaveButton.tsxtsx

import { Button, toast } from 'oink-ui';

export function SaveButton() {
  return <Button variant="primary" onClick={() => toast.success('已保存')}>保存</Button>;
}

长行

默认不换行，在代码块内部横向滚动（原生滚动，只换了滚动条外观）；加 wrap 则自动换行。

bash

curl -X POST https://api.example.com/v1/projects/8a1f/deployments -H "Authorization: Bearer $TOKEN" -H "Content-Type: application/json" -d '{"branch":"main","environment":"production"}'

bash

curl -X POST https://api.example.com/v1/projects/8a1f/deployments -H "Authorization: Bearer $TOKEN" -H "Content-Type: application/json" -d '{"branch":"main","environment":"production"}'

限高与不带头部

maxHeight 限制高度，超出后纵向滚动。不传 language 和 title、并关掉 copyable 时没有头部，只剩代码。

worker.log

01  2024-08-17 10:10:02  INFO  已处理第 1 批任务
02  2024-08-17 10:11:02  INFO  已处理第 2 批任务
03  2024-08-17 10:12:02  INFO  已处理第 3 批任务
04  2024-08-17 10:13:02  INFO  已处理第 4 批任务
05  2024-08-17 10:14:02  INFO  已处理第 5 批任务
06  2024-08-17 10:15:02  INFO  已处理第 6 批任务
07  2024-08-17 10:16:02  INFO  已处理第 7 批任务
08  2024-08-17 10:17:02  INFO  已处理第 8 批任务
09  2024-08-17 10:18:02  INFO  已处理第 9 批任务
10  2024-08-17 10:19:02  INFO  已处理第 10 批任务
11  2024-08-17 10:20:02  INFO  已处理第 11 批任务
12  2024-08-17 10:21:02  INFO  已处理第 12 批任务
13  2024-08-17 10:22:02  INFO  已处理第 13 批任务
14  2024-08-17 10:23:02  INFO  已处理第 14 批任务
15  2024-08-17 10:24:02  INFO  已处理第 15 批任务
16  2024-08-17 10:25:02  INFO  已处理第 16 批任务
17  2024-08-17 10:26:02  INFO  已处理第 17 批任务
18  2024-08-17 10:27:02  INFO  已处理第 18 批任务

npm run dev

接口

CodeBlock

属性	类型	默认值	说明
`code`	`string`	—	代码文本；也可以写在 children 里（只接受字符串）。
`language`	`string`	—	语言名，显示在头部，并写到 `code` 元素的 `language-*` 类名上（方便接入第三方高亮）。
`title`	`ReactNode`	—	标题（文件名等），显示在语言前面。
`copyable`	`boolean`	`true`	显示复制按钮。
`wrap`	`boolean`	—	长行自动换行。默认不换行，横向滚动。
`maxHeight`	`number \| string`	—	最大高度，超出后纵向滚动。
`label`	`string`	—	代码区域的名字（给读屏），默认取 title / language /“代码”。
`onCopy`	`(code: string) => void`	—	复制成功后。

Code

属性	类型	默认值	说明
`...rest`	`HTMLAttributes<HTMLElement>`	—	渲染成 `code` 元素，原生属性全部透传。

行内代码

代码块

长行

限高与不带头部

接口

CodeBlock

Code

无障碍