componente · @solu30/ui-kit/display
CodeBlock
Bloque de código con resaltado de sintaxis para HTML y JavaScript, sin dependencias externas.
Seguir leyendo — 1 párrafo más
Single-pass HTML/JS syntax highlighter for embedding code snippets. Recognizes HTML tags, attributes, comments, JS keywords, and string literals. Safe — renders via dangerouslySetInnerHTML with only inline color styles, no script injection.
7 sitios de import en 4 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.
- TheCharterPanel
- cmp-packages
- gestorsalon
- pagebuilder
El componente, montado
Cargando el componente del paquete instalado…
Cómo se usa
import { CodeBlock } from '@solu30/ui-kit/display'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| code | sí | string | — |
| className | opcional | string | — |
Ejemplo del paquete
// Muestra código, no lo resalta: `code` va como texto plano.
<CodeBlock code={`import { Button } from '@solu30/ui-kit/input'`} />Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.