Saltar al contenido principal

Core · Mostrar contenido

Código

Muestra código dentro de una frase o en un bloque con colores de sintaxis en todos los modos.

Esta traducción la ha escrito una IA y todavía no la ha revisado ninguna persona. Leer esta página en inglés

Ejemplo

Bloques de código en los tres modos, todos con la misma paleta.

.panel {
  padding: var(--luz-space-md);
  color: var(--luz-text-primary);
  background: var(--luz-surface);
}
<button
  class="luz-btn luz-btn--primary"
  type="button">
  Save changes
</button>
import { MidiPlayer }
  from "@luz-ds/core/midi";

const player = await MidiPlayer.load(url);
player.play();

Inline code looks like var(--luz-text-primary) inside a sentence.

Syntax colours in the three modes

LUZ's own scheme: keywords stay ink and bold, colour goes to what the author wrote (names, properties, values), comments step back in italic. No red, because red means error.

Each colour keeps 4.5:1 or more on the block, 7:1 or more in high contrast.

TokenClassWhat it marks
--luz-code-comment
.tok-comment
Comments in every language. Muted and italic.
--luz-code-keyword
.tok-keyword
JavaScript and shell keywords, CSS at-rules and !important, the HTML doctype. Ink and bold, no colour.
--luz-code-name
.tok-name
HTML tags, CSS selectors and functions, JavaScript function and class names, shell commands.
--luz-code-property
.tok-property
HTML attributes, CSS properties and custom properties, JSON keys, shell flags and variables.
--luz-code-string
.tok-string
Quoted strings in every language, HTML attribute values.
--luz-code-literal
.tok-literal
Numbers and units, hex colours, true, false, null, HTML entities.

Light

/* Wide cards */
@media (min-width: 48rem) {
  .card::after {
    content: "new";
    inset: 0 auto auto 50%;
    color: var(--ink, #036);
  }
}
<!doctype html>
<!-- Primary action -->
<button type="submit" disabled>
  Save &amp; close
</button>
// Play a track
const player = await
  MidiPlayer.load("a.mid");
if (player) player.play(0, true);
{
  "name": "@luz-ds/core",
  "private": false,
  "size": 7.02
}
# Build and test
pnpm core:build
npx playwright test \
  --project=chromium $CI

Dark

/* Wide cards */
@media (min-width: 48rem) {
  .card::after {
    content: "new";
    inset: 0 auto auto 50%;
    color: var(--ink, #036);
  }
}
<!doctype html>
<!-- Primary action -->
<button type="submit" disabled>
  Save &amp; close
</button>
// Play a track
const player = await
  MidiPlayer.load("a.mid");
if (player) player.play(0, true);
{
  "name": "@luz-ds/core",
  "private": false,
  "size": 7.02
}
# Build and test
pnpm core:build
npx playwright test \
  --project=chromium $CI

High contrast

/* Wide cards */
@media (min-width: 48rem) {
  .card::after {
    content: "new";
    inset: 0 auto auto 50%;
    color: var(--ink, #036);
  }
}
<!doctype html>
<!-- Primary action -->
<button type="submit" disabled>
  Save &amp; close
</button>
// Play a track
const player = await
  MidiPlayer.load("a.mid");
if (player) player.play(0, true);
{
  "name": "@luz-ds/core",
  "private": false,
  "size": 7.02
}
# Build and test
pnpm core:build
npx playwright test \
  --project=chromium $CI

Problemas conocidos

El resaltador usa un conjunto de patrones, no un analizador: las etiquetas JSX, el contenido de los elementos style y script de HTML y los valores de atributos sin comillas se muestran sin formato. Los colores son decorativos: la tecnología de asistencia lee el código de la misma forma.

Código

Copiar el marcado

Un pre sin clase no necesita ninguna: tipografía monoespaciada, una superficie atenuada y un borde.

HTML 
<pre><code>npm install @luz-ds/core</code></pre>

.luz-code-block añade la insignia del lenguaje y los colores del resaltado. Con la clase:

HTML 
<pre class="luz-code-block" data-lang="css" tabindex="0" role="region" aria-label="Panel styles"><code>.panel {
  color: var(--luz-text-primary);
}</code></pre>
HTML 
<p>Set the colour with <code class="luz-code-inline">--luz-text-primary</code>.</p>
JS 
import { initHighlight } from "@luz-ds/core/highlight";
initHighlight();

Variantes y opciones

Dos clases y el idioma en un atributo.

Clase o atributoEfecto
.luz-code-block
Un bloque sobre una superficie atenuada, con fuente mono y desplazamiento horizontal si una línea es larga
.luz-code-inline
Código dentro de una frase, con el color de código
data-lang
El idioma: html, css, js, jsx, json, bash, sh o shell. Se muestra como una etiqueta en una línea propia encima del código, en el borde final. Cualquier otro valor se muestra sin resaltarlo

Cómo funciona

Un <pre> con un <code> dentro, al que da estilo components/code.css. El resaltado es opcional y lo proporciona highlight.js.

  • highlightBlock(pre) colorea un bloque: envuelve el código con seis clases .tok-*, una por cada token --luz-code-*.
  • initHighlight() lo hace con cada pre.luz-code-block, añade un aria-label a los bloques que no tengan ninguno («Ejemplo de CSS») y añade un botón para copiar en cada bloque. Core no asigna una posición a ese botón: colócalo con tu propio CSS o llama solo a highlightBlock(). luz.js ejecuta initHighlight().
  • En colores forzados, todos los colores pasan a ser el color de texto del sistema; las palabras clave en negrita y los comentarios en cursiva se mantienen.

Sin JavaScript

El bloque es texto normal y legible de un solo color. Solo se pierden los colores.

Teclado y ARIA

Un bloque puede ser más ancho que la pantalla, así que debe recibir el foco: con Tab se llega a él y las teclas de flecha permiten desplazarse.

  • Usa tabindex="0", role="region" y un aria-label que identifique el código, para que la parada de foco tenga un nombre.
  • El código en línea no necesita nada.

El contraste y el foco están en la pestaña Diseño.

Diseño

Cuándo usarlo

Usa un bloque de código para mostrar código o resultados del terminal que el lector pueda consultar o copiar, y código en línea para nombres dentro de una frase.

Cuándo no usarlo

No uses un bloque de código para un archivo largo ni para texto que no sea código.

  • Para enlazar a un archivo completo, enlaza al archivo original.
  • Para indicar una tecla que debe pulsar el lector, usa <kbd>.

Qué hacer y qué no

Hazlo Muestra código que funcione al pegarlo: solo el comando.
Evítalo No mezcles el símbolo del prompt y el resultado en el mismo bloque: al pegarlo, fallarán «$» y las líneas de salida.

Cómo escribir el contenido

Muestra código que funcione al pegarlo.

  • Identifica cada bloque en su aria-label: indica qué código contiene, no «Código».
  • Define data-lang; usa text para los resultados que no sean código.
  • Procura que las líneas sean cortas: una línea larga obliga al lector a desplazarse horizontalmente.

Contraste y foco

El código y los colores de sintaxis aparecen sobre una superficie atenuada. En alto contraste, todos los colores de sintaxis alcanzan 7:1.

ParteColor sobre el fondoClaroOscuroAlto contrasteMínimo
Código
--luz-text-primary on --luz-surface-muted
15.8:1
15.1:1
20.1:1
4.5:1
Comentario
--luz-code-comment on --luz-surface-muted
5.0:1
8.5:1
8.7:1
4.5:1
Palabra clave
--luz-code-keyword on --luz-surface-muted
15.8:1
15.1:1
20.1:1
4.5:1
Nombre
--luz-code-name on --luz-surface-muted
8.8:1
12.0:1
13.5:1
4.5:1
Propiedad
--luz-code-property on --luz-surface-muted
5.6:1
8.1:1
9.7:1
4.5:1
Cadena
--luz-code-string on --luz-surface-muted
8.2:1
9.0:1
8.3:1
4.5:1
Literal
--luz-code-literal on --luz-surface-muted
6.7:1
8.4:1
11.1:1
4.5:1
Etiqueta del idioma
--luz-text-secondary on --luz-surface-muted
6.2:1
7.5:1
18.4:1
4.5:1
Código en línea
--luz-color-code on --luz-surface-muted
5.3:1
8.1:1
9.0:1
4.5:1

Medido a partir de los valores de los tokens de cada modo y redondeado hacia abajo. El mínimo requerido es el de WCAG 2.2 AA: 4,5:1 para texto y 3:1 para anillos de foco, bordes e iconos.

  • Foco: core no dibuja su propio anillo en un bloque desplazable (tabindex="0"): se muestra el del navegador. Esta documentación añade el anillo de LUZ en reference.css; haz lo mismo si tus bloques se desplazan.
  • No depende solo del color: las palabras clave están en negrita y los comentarios en cursiva, por lo que la sintaxis sigue siendo legible sin los colores.

Tokens que usa

Los 21 tokens que lee components/code.css, agrupados por familia. Cada familia enlaza a su página, donde aparecen los valores de todos los modos. En Figma son variables con los mismos nombres: consulta Tokens en Figma.

Spacing and sizing
--luz-space-2xs, --luz-space-3xs, --luz-space-md, --luz-space-sm
Typography
--luz-font-mono, --luz-text-sm, --luz-text-xs
Radius
--luz-radius-md, --luz-radius-sm
Motion
--luz-duration-base

El teclado y ARIA están en la pestaña Código.

Última actualización · Editar esta página · Avisar de un problema