R后悔药 Rue.js
设置

Mockup Code 代码外框

MockupCode 现在同时支持两种写法：展示基础pre + data-prefix 结构，也提供更顺手的items与MockupCode.Line语义 API，适合终端日志、代码片段和差异对比。

何时使用

  • 需要用 Rue 的终端外框包裹一小段安装命令、日志输出或代码片段。
  • 希望把行号、前缀、状态色和高亮行用语义属性表达，而不是手写每个pre。

# 推荐：items 数据驱动

适合命令日志场景，根节点 prefix 可给整组行提供默认前缀。

pnpm add @rue-js/design
Resolving workspace packages...
Done in 2.1s

# 组合子项

需要混合前缀、原生节点和 highlight 时，用 MockupCode.Line 会更直观。

import { MockupCode } from '@rue-js/design'
const lines = [{ children: <code>hello rue</code> }]
<MockupCode items={lines} />

# 自动行号

当前示例先用显式前缀展示带行号片段，预览区可稳定看到完整内容。

import { MockupCode } from '@rue-js/design'
export default function Demo() {
  return <MockupCode lineNumbers items={lines} />
}

# 单行前缀

展示原生写法，适合最简单的安装命令展示。

npm i daisyui

# 多行日志

基础多行示例 展示，适合完全透传现成结构。

npm i daisyui
installing...
Done!

# 高亮与语义色

highlight 和 tone 适合做差异提示、错误定位和关键输出。

npm i daisyui
installing...
Error!
const theme = "light"
const theme = "rue-night"
const panel = createWorkspace(theme)

# 长行滚动

根节点仍然保持最薄的样式层，横向滚动继续交给外层布局容器。

Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.

# 无前缀

没有行号或提示符的短内容也可以直接放进 MockupCode。

without prefix

# 自定义底色

组件继续遵循 Rue 的样式组合方式，主题色交给 className 自由叠加。

can be any color!

API

当前页面展示的是语义化的根组件与行组件 API。

MockupCode

属性说明类型默认值
as指定根节点标签any'div'
items数据驱动写法，按数组自动渲染多行ReadonlyArray<MockupCodeLineData>-
prefix为 items 模式下的每一行提供默认前缀，单行可继续覆盖any-
lineNumbers开启后为 items 模式自动补行号，未显式设置 prefix 时会把行号写入 data-prefixbooleanfalse
start自动行号的起始值number1
codeClassNameitems 模式下自动生成的 code 标签类名string-
className追加到 mockup-code 根节点的类名string-

MockupCode.Line / MockupCodeLineData

属性说明类型默认值
prefix当前行前缀，最终写入 data-prefixany-
lineNumber快捷行号；未设置 prefix 时会作为前缀输出number | string-
code快捷文本内容，会自动包一层 code 标签any-
tone行级语义色，适合成功、告警、错误等状态'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'-
highlight把当前行渲染成高亮底色；可与 tone 组合booleanfalse
codeClassName自动生成的 code 标签类名string-
children自定义整行内容；传入后优先级高于 codeany-

前缀优先级

item.prefix优先级最高
否则回退到根节点prefix
两者都没有时，lineNumbers会输出自动行号

FAQ

什么时候用 items，什么时候可以写原生 pre？

如果内容来自数组、日志流或代码生成，优先用items；如果你已经有现成的pre + data-prefix结构，继续透传即可，不需要额外改造。

highlight 和 tone 分别负责什么？

tone负责语义色，适合成功、错误、告警等输出；highlight负责行背景强调，两者叠加后更适合做 diff 或重点提示。