Preview Updated 2026-05-10

Code

InlineCode for inline snippets + CodeBlock for multi-line blocks — with optional title, language tag, line numbers, copy button, and max scroll height.

Basic usage

<CfInlineCode> embeds small inline snippets (package names, commands). <CfCodeBlock> takes a code string and renders a multi-line block, with optional title / language / showLineNumbers / copyable.

This component handles styling only — it doesn’t perform syntax highlighting. If you need highlighting, run shiki / highlight.js externally and pass the highlighted HTML in via a slot / dangerouslySetInnerHTML (not built-in for v0).

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

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

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

<p>Install with <CfInlineCode>npm i @chufix-design/vue</CfInlineCode>.</p>
<CfCodeBlock :code="code" language="tsx" title="hello.tsx" />

<p>Install with <CfInlineCode>npm i @chufix-design/react</CfInlineCode>.</p>
<CfCodeBlock code={code} language="tsx" title="hello.tsx" />

Inline code

<CfInlineCode> on its own — wraps <code> as a monospace pill with a tinted background and rounded corners. size="sm" gives a smaller variant for dense docs.

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

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

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

<p>Common packages: <CfInlineCode>@chufix-design/vue</CfInlineCode>, <CfInlineCode>@chufix-design/react</CfInlineCode>.</p>
<p>Command: <CfInlineCode>pnpm dev</CfInlineCode>.</p>
<p>Small: <CfInlineCode size="sm">--config</CfInlineCode>.</p>

<p>Common packages: <CfInlineCode>@chufix-design/vue</CfInlineCode>, <CfInlineCode>@chufix-design/react</CfInlineCode>.</p>
<p>Command: <CfInlineCode>pnpm dev</CfInlineCode>.</p>
<p>Small: <CfInlineCode size="sm">--config</CfInlineCode>.</p>

Line numbers

showLineNumbers shows line numbers on the left — handy for tutorials and walkthroughs.

      
        
          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 />

Limit max height

maxHeight enables vertical scrolling so long blocks don’t take over the page.

      
        
          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

Prop	Type	Default	Description
`size`	`'sm' \| 'md'`	`'md'`	Size, relative to the parent font size

API · CodeBlock

Prop	Type	Default	Description
`code`	`string`	required	Code content (use `\n` for line breaks)
`language`	`string`	`—`	Language label on the right of the header
`title`	`string \| ReactNode`	`—`	Title on the left of the header — typically a file name
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Font size
`showLineNumbers`	`boolean`	`false`	Whether to show line numbers
`copyable`	`boolean`	`true`	Show the copy button in the header
`maxHeight`	`number \| string`	`—`	Max height to enable vertical scrolling