开发预览更新于 2026-05-10

Code 代码

InlineCode 行内代码 + CodeBlock 多行代码块；可加标题、语言标签、行号、复制按钮、滚动高度。

基础用法

<CfInlineCode> 用于句中嵌入小段代码（包名 / 命令）。<CfCodeBlock> 接收 code 字符串渲染多行代码块，可选 title / language / showLineNumbers / copyable。

本组件只渲染样式，不做语法高亮 — 如需高亮请在外部接 shiki / highlight.js 等并把高亮后的 HTML 通过 slot / dangerouslySetInnerHTML 传入（v0 暂不内置）。

用 npm i @chufix-design/vue 安装。

      
      import { CfButton } from '@chufix-design/vue';

export function Hello() {
  return <CfButton>Click me</CfButton>;
}

<p>用 <CfInlineCode>npm i @chufix-design/vue</CfInlineCode> 安装。</p>
<CfCodeBlock :code="code" language="tsx" title="hello.tsx" />

<p>用 <CfInlineCode>npm i @chufix-design/react</CfInlineCode> 安装。</p>
<CfCodeBlock code={code} language="tsx" title="hello.tsx" />

行内代码

<CfInlineCode> 单独使用 — 把 <code> 包成等宽 + 浅色底 + 圆角的小标签。size="sm" 在密集文档里更小一档。

常用包：@chufix-design/vue、@chufix-design/react、@chufix-design/tokens。

命令：pnpm dev 启动开发服务器。

小号：--config 是命令行参数。

<p>常用包：<CfInlineCode>@chufix-design/vue</CfInlineCode>、<CfInlineCode>@chufix-design/react</CfInlineCode>。</p>
<p>命令：<CfInlineCode>pnpm dev</CfInlineCode>。</p>
<p>小号：<CfInlineCode size="sm">--config</CfInlineCode>。</p>

<p>常用包：<CfInlineCode>@chufix-design/vue</CfInlineCode>、<CfInlineCode>@chufix-design/react</CfInlineCode>。</p>
<p>命令：<CfInlineCode>pnpm dev</CfInlineCode>。</p>
<p>小号：<CfInlineCode size="sm">--config</CfInlineCode>。</p>

行号

showLineNumbers 在每行左侧显示行号 — 教程 / 教学场景中便于读者跟随。

      
        
          12345678
        
      
      function fib(n) {
  if (n <= 1) return n;
  let [a, b] = [0, 1];
  for (let i = 2; i <= n; i++) {
    [a, b] = [b, a + b];
  }
  return b;
}

<CfCodeBlock :code="code" language="js" title="fib.js" show-line-numbers />

<CfCodeBlock code={code} language="js" title="fib.js" showLineNumbers />

限制最大高度

maxHeight 启用纵向滚动 — 长代码块在文档里不至于把屏幕占满。

      
        
          123456789101112131415161718192021222324252627282930
        
      
      console.log('行 1');
console.log('行 2');
console.log('行 3');
console.log('行 4');
console.log('行 5');
console.log('行 6');
console.log('行 7');
console.log('行 8');
console.log('行 9');
console.log('行 10');
console.log('行 11');
console.log('行 12');
console.log('行 13');
console.log('行 14');
console.log('行 15');
console.log('行 16');
console.log('行 17');
console.log('行 18');
console.log('行 19');
console.log('行 20');
console.log('行 21');
console.log('行 22');
console.log('行 23');
console.log('行 24');
console.log('行 25');
console.log('行 26');
console.log('行 27');
console.log('行 28');
console.log('行 29');
console.log('行 30');

<CfCodeBlock :code="code" language="js" title="long-output.js" show-line-numbers :max-height="200" />

<CfCodeBlock code={code} language="js" title="long-output.js" showLineNumbers maxHeight={200} />

API · InlineCode

属性	类型	默认值	说明
`size`	`'sm' \| 'md'`	`'md'`	大小，相对父字号

API · CodeBlock

属性	类型	默认值	说明
`code`	`string`	必填	代码内容（多行用 `\n` 分隔）
`language`	`string`	`—`	头部右侧的语言标签
`title`	`string \| ReactNode`	`—`	头部左侧标题，常用作文件名
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	字号
`showLineNumbers`	`boolean`	`false`	是否显示行号
`copyable`	`boolean`	`true`	头部显示复制按钮
`maxHeight`	`number \| string`	`—`	启用纵向滚动的最大高度