npm install @heroui/react npm install @heroui/react npm install @heroui/react

); } `;var F={"/App.jsx":g},b={...F};var y=`import {Code} from "@heroui/react"; export default function App() { return (

npm install @heroui/react npm install @heroui/react npm install @heroui/react npm install @heroui/react npm install @heroui/react npm install @heroui/react

); } `;var S={"/App.jsx":y},A={...S};var c={usage:x,sizes:b,colors:A};var X={title:"Code \u4EE3\u7801\u7EC4\u4EF6",description:"Code \u662F\u4E00\u4E2A\u7528\u4E8E\u663E\u793A\u884C\u5185\u4EE3\u7801\u7684\u7EC4\u4EF6\u3002"};function j(r){let e={h1:"h1",h2:"h2",h3:"h3",hr:"hr",p:"p",...r.components},{APITable:t,CarbonAd:d,CodeDemo:n,ComponentLinks:l,ImportTabs:p,PackageManagers:s,Spacer:m}=e;return t||i("APITable",!0),d||i("CarbonAd",!0),n||i("CodeDemo",!0),l||i("ComponentLinks",!0),p||i("ImportTabs",!0),s||i("PackageManagers",!0),m||i("Spacer",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{id:"code-\u4EE3\u7801\u7EC4\u4EF6",children:"Code \u4EE3\u7801\u7EC4\u4EF6"}),` `,(0,o.jsx)(e.p,{children:"Code \u662F\u4E00\u4E2A\u7528\u4E8E\u663E\u793A\u884C\u5185\u4EE3\u7801\u7684\u7EC4\u4EF6\u3002"}),` `,(0,o.jsx)(l,{component:"code",rscCompatible:!0}),` `,(0,o.jsx)(e.hr,{}),` `,(0,o.jsx)(d,{}),` `,(0,o.jsx)(e.h2,{id:"\u5B89\u88C5",children:"\u5B89\u88C5"}),` `,(0,o.jsx)(s,{showGlobalInstallWarning:!0,commands:{cli:"npx heroui-cli@latest add code",npm:"npm install @heroui/code",yarn:"yarn add @heroui/code",pnpm:"pnpm add @heroui/code",bun:"bun add @heroui/code"}}),` `,(0,o.jsx)(e.h2,{id:"\u5BFC\u5165",children:"\u5BFC\u5165"}),` `,(0,o.jsx)(p,{commands:{main:'import {Code} from "@heroui/react";',individual:'import {Code} from "@heroui/code";'}}),` `,(0,o.jsx)(e.h2,{id:"\u7528\u6CD5",children:"\u7528\u6CD5"}),` `,(0,o.jsx)(n,{title:"\u7528\u6CD5\u793A\u4F8B",files:c.usage}),` `,(0,o.jsx)(e.h3,{id:"\u5C3A\u5BF8",children:"\u5C3A\u5BF8"}),` `,(0,o.jsx)(n,{title:"\u5C3A\u5BF8\u793A\u4F8B",files:c.sizes}),` `,(0,o.jsx)(e.h3,{id:"\u989C\u8272",children:"\u989C\u8272"}),` `,(0,o.jsx)(n,{title:"\u989C\u8272\u793A\u4F8B",files:c.colors}),` `,(0,o.jsx)(m,{y:4}),` `,(0,o.jsx)(e.h2,{id:"api",children:"API"}),` `,(0,o.jsx)(e.h3,{id:"code-\u7EC4\u4EF6\u5C5E\u6027",children:"Code \u7EC4\u4EF6\u5C5E\u6027"}),` `,(0,o.jsx)(t,{data:[{attribute:"children",type:"ReactNode",description:"\u4EE3\u7801\u5185\u5BB9",default:"-"},{attribute:"size",type:"sm | md | lg",description:"\u4EE3\u7801\u5C3A\u5BF8",default:"sm"},{attribute:"color",type:"default | primary | secondary | success | warning | danger",description:"\u4EE3\u7801\u989C\u8272",default:"default"},{attribute:"radius",type:"none | sm | md | lg | full",description:"\u5706\u89D2\u5927\u5C0F",default:"sm"}]})]})}function _(r={}){let{wrapper:e}=r.components||{};return e?(0,o.jsx)(e,{...r,children:(0,o.jsx)(j,{...r})}):j(r)}function i(r,e){throw new Error("Expected "+(e?"component":"object")+" `"+r+"` to be defined: you likely forgot to import, pass, or provide it.")}return T(G);})(); ;return Component;

Prop	Type	Default
`children`	`ReactNode`
`size`	`sm \| md \| lg`	`"sm"`
`color`	`default \| primary \| secondary \| success \| warning \| danger`	`"default"`
`radius`	`none \| sm \| md \| lg \| full`	`"sm"`

Code 代码组件

安装

导入

用法

尺寸

颜色

API

Code 组件属性