Code

Visualización de maqueta de código para comandos de terminal y fragmentos de código.

Importar

import { Code } from 'asterui'

Ejemplos

Bloque de Código Básico

Maqueta de código simple con prefijo de comando.

</>

npm install asterui

import { Code } from 'asterui'

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

export default App

Múltiples Líneas

Bloque de código con múltiples líneas y diferentes prefijos.

</>

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

Números de Línea

Bloque de código con prefijos de números de línea.

</>

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

Líneas Resaltadas

Bloque de código con líneas resaltadas para énfasis.

</>

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

Con Botón de Copiar

Agrega un botón de copiar con la prop 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

Botón de Copiar (Multilínea)

El botón de copiar funciona también con múltiples líneas.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
children	Contenido de las líneas de código	React.ReactNode	-
copyable	Mostrar botón de copiar. Pasa true para auto-extraer texto, o una cadena para texto de copia personalizado	boolean | string	false
className	Clases CSS adicionales	string	-

Code.Line

Propiedad	Descripción	Tipo	Predeterminado
children	Contenido de la línea	React.ReactNode	-
prefix	Prefijo de línea (ej., $, >, número de línea)	string	-
className	Clases CSS adicionales	string	-
highlight	Resaltar esta línea	boolean	false