Code 代码

用于终端命令和代码片段的代码模型显示。

引入

import { Code } from 'asterui'

示例

基本代码块

带命令前缀的简单代码模型。

</>

npm install asterui

import { Code } from 'asterui'

function App() {
  return (
      <Code>
        <Code.Line prefix="$">npm install asterui</Code.Line>
      </Code>
    )
}

export default App

多行

带多行和不同前缀的代码块。

</>

npm install asterui

installing dependencies...

added 42 packages

npm run dev

import { Code } from 'asterui'

function App() {
  return (
      <Code>
        <Code.Line prefix="$">npm install asterui</Code.Line>
        <Code.Line prefix=">">installing dependencies...</Code.Line>
        <Code.Line prefix=">">added 42 packages</Code.Line>
        <Code.Line prefix="$">npm run dev</Code.Line>
      </Code>
    )
}

export default App

行号

带行号前缀的代码块。

</>

import React from 'react'

import { Button } from 'asterui'

export default function App() {

  return <Button>Click me</Button>

}

import { Code } from 'asterui'

function App() {
  return (
      <Code>
        <Code.Line prefix="1">import React from 'react'</Code.Line>
        <Code.Line prefix="2">import {'{ Button }'} from 'asterui'</Code.Line>
        <Code.Line prefix="3"></Code.Line>
        <Code.Line prefix="4">export default function App() {'{'}</Code.Line>
        <Code.Line prefix="5">  return &lt;Button&gt;Click me&lt;/Button&gt;</Code.Line>
        <Code.Line prefix="6">{'}'}</Code.Line>
      </Code>
    )
}

export default App

高亮行

带高亮行以强调的代码块。

</>

function greet(name) {

  console.log('Hello, ' + name)

}

greet('World')

import { Code } from 'asterui'

function App() {
  return (
      <Code>
        <Code.Line prefix="1">function greet(name) {'{'}</Code.Line>
        <Code.Line prefix="2" highlight>  console.log('Hello, ' + name)</Code.Line>
        <Code.Line prefix="3">{'}'}</Code.Line>
        <Code.Line prefix="4"></Code.Line>
        <Code.Line prefix="5" highlight>greet('World')</Code.Line>
      </Code>
    )
}

export default App

带复制按钮

使用 copyable 属性添加复制按钮。

</>

npm install asterui

import { Code } from 'asterui'

function App() {
  return (
      <Code copyable>
        <Code.Line prefix="$">npm install asterui</Code.Line>
      </Code>
    )
}

export default App

复制按钮（多行）

复制按钮也适用于多行。

</>

import { Button } from 'asterui'

export default function App() {

  return <Button>Click me</Button>

}

import { Code } from 'asterui'

function App() {
  return (
      <Code copyable>
        <Code.Line prefix="1">import {'{ Button }'} from 'asterui'</Code.Line>
        <Code.Line prefix="2"></Code.Line>
        <Code.Line prefix="3">export default function App() {'{'}</Code.Line>
        <Code.Line prefix="4">  return &lt;Button&gt;Click me&lt;/Button&gt;</Code.Line>
        <Code.Line prefix="5">{'}'}</Code.Line>
      </Code>
    )
}

export default App

API

Code

属性	描述	类型	默认值
children	代码行内容	React.ReactNode	-
copyable	显示复制按钮。传递 true 自动提取文本，或传递字符串作为自定义复制文本	boolean | string	false
className	额外的 CSS 类名	string	-

Code.Line

属性	描述	类型	默认值
children	行内容	React.ReactNode	-
prefix	行前缀（例如 $、>、行号）	string	-
className	额外的 CSS 类名	string	-
highlight	高亮此行	boolean	false