Código incorporado.

Patrón canónico de código incorporado para cochid-graphs, mapas, periodismo2 y firmas y documentos.

Verlo por niveles

Primero el componente, después la variación de marca y finalmente su uso dentro de una página.

Nivel 1Componente canónico

curl https://api.cochid.cl/v1/datos
  -H "Accept: application/json"

Fuente: API COCHID · ejemplo 1Abrir referencia

Nivel 2Compañía de Innovación de Santiago · variación

pip install cochid

Fuente: paquete cochidVer instalación

Nivel 3Dentro de una página

Sitio · sección

curl https://api.cochid.cl/v1/datos
  -H "Accept: application/json"

Fuente: API COCHID · ejemplo 1Abrir referencia

Ayuda · legal · estado

Ver y copiar el código de este render

HTML del nivel canónico

<figure class="ui-sample ui-embed" data-embed="code"><pre><code>curl https://api.cochid.cl/v1/datos
  -H &quot;Accept: application/json&quot;</code></pre><figcaption><span>Fuente: API COCHID · ejemplo 1</span><a href="#api">Abrir referencia</a></figcaption></figure>

Variaciones por marca y sitio

Cada cambio visible declara su autoridad; lo que permanece canónico no se vuelve a inventar en el producto.

cochid.cl

COCHID

Autoridad: core-style/DECISIONES.md M15 y LOGOS-CANONICOS.md

curl https://api.cochid.cl/v1/datos
  -H "Accept: application/json"

Fuente: API COCHID · ejemplo 1Abrir referencia

Cambia en esta marca

Cuadrado azul y namebrand de tres líneas
Azul COCHID en selección, capas y series

Permanece canónico

Estructura y semántica comunes
Fuentes, unidades y alternativa tabular

innovacionsantiago.cl

Compañía de Innovación de Santiago

Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.md

pip install cochid

Fuente: paquete cochidVer instalación

Cambia en esta marca

Navegación y contenido propios del servicio
Acento reservado para acciones y datos

Permanece canónico

Mark CIS y namebrand de tres líneas
IBM Plex Sans, foco, espaciado y anatomía

Comparación histórica recuperable

Compara la propuesta con cortes reales del repositorio. La ausencia de una muestra se declara y nunca se reconstruye de memoria.

Preparando comparación histórica…

Antes / r19

La comparación convierte una regla abstracta en una diferencia visible y verificable.

r19 · correctoContrato canónico renderizado

curl https://api.cochid.cl/v1/datos
  -H "Accept: application/json"

Fuente: API COCHID · ejemplo 1Abrir referencia

Mantén proporción, título accesible, fuente y vista completa.
Proporciona consentimiento y fallback cuando depende de terceros.

Antes · problema observadoAnti-ejemplo no interactivo

Contenido incorporadoRectángulo vacío sin fuente, fallback ni vista completa

No cargues terceros sin política CSP y privacidad.
No dejes un rectángulo vacío cuando falla el origen.

Responsive

La misma anatomía debe conservar lectura, foco y acciones sin cortar contenido ni crear scroll horizontal en la página.

320 pxMóvil y zoom

curl https://api.cochid.cl/v1/datos
  -H "Accept: application/json"

Fuente: API COCHID · ejemplo 1Abrir referencia

1280 pxEscritorio

pip install cochid

Fuente: paquete cochidVer instalación

Cobertura

Dimensión	Contrato
Propietario canónico	Sistema de diseño CIS y servicio productor · core/core-style
Consumidores	cochid-graphs, Mapas, Periodismo2 y Firmas y Documentos
Dependencias	CSP, sandbox, fallback enlazable
Estado	candidato

Evidencia de adopción

Patrón propuesto. 0 implementaciones observadas en 0 repositorios.

La observación demuestra uso existente; la aceptación canónica sigue dependiendo de esta ficha y de su propietario.

Dato	Resultado
Clasificación	Patrón propuesto
Implementaciones	0 implementaciones observadas
Repositorios	Ningún repositorio observado
Snapshot	kit/componentes/componentes-observados.json

Consumidores observados

El inventario conserva repositorio, archivo fuente y criterio de asociación. Observar una implementación no la convierte automáticamente en canónica.

Ver implementaciones asociadas a Código incorporado

Estados

Estado requerido
cargando
disponible
bloqueado
error
sin JavaScript

Accesibilidad

Conserva nombre accesible, orden de lectura y foco visible.
Funciona a 320 px, con zoom de 200% y texto largo.
El color nunca es la única señal de estado o acción.
El contenido esencial permanece disponible sin JavaScript.

Código HTML

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

<figure class="ui-sample ui-embed" data-embed="code"><pre><code>curl https://api.cochid.cl/v1/datos
  -H &quot;Accept: application/json&quot;</code></pre><figcaption><span>Fuente: API COCHID · ejemplo 1</span><a href="#api">Abrir referencia</a></figcaption></figure>

Código TAILWIND

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

<figure class="ui-sample ui-embed border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-embed="code"><pre class="overflow-x-auto border border-slate-300 bg-slate-50 p-3"><code>curl https://api.cochid.cl/v1/datos
  -H &quot;Accept: application/json&quot;</code></pre><figcaption class="text-sm text-slate-600"><span>Fuente: API COCHID · ejemplo 1</span><a class="underline underline-offset-4" href="#api">Abrir referencia</a></figcaption></figure>

Código REACT

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

export interface CodeEmbedProps {
  /** Código que se muestra tal cual; `<pre>` conserva saltos de línea y sangría. Vacío omite el bloque. */
  code?: string;
  /** Origen del ejemplo, con su prefijo («Fuente: …»); vacío lo oculta. */
  source?: string;
  /** Dato secundario tras la fuente, separado por « · », como el número de ejemplo; vacío se omite. */
  detail?: string;
  /** Texto del enlace a la referencia; sin él o sin `href` no se muestra. */
  linkLabel?: string;
  href?: string;
  className?: string;
}

/**
 * Bloque de código incorporado con su fuente y un enlace a la referencia; muestra un comando o una llamada de ejemplo a una API.
 *
 * @example <CodeEmbed code={"curl https://api.cochid.cl/v1/datos\n  -H \"Accept: application/json\""} detail="ejemplo 2" href="/api/referencia" />
 * @example <CodeEmbed code="pip install cochid" source="Fuente: paquete cochid" detail="" linkLabel="Ver instalación" href="/instalar" />
 */
export function CodeEmbed({
  code = 'curl https://api.cochid.cl/v1/datos\n  -H "Accept: application/json"',
  source = "Fuente: API COCHID",
  detail = "ejemplo 1",
  linkLabel = "Abrir referencia",
  href = "#api",
  className,
}: CodeEmbedProps) {
  const texto = [source, detail].filter(Boolean).join(" · ");
  const enlace = linkLabel && href ? <a href={href}>{linkLabel}</a> : null;
  return (
    <figure className={["ui-embed", className].filter(Boolean).join(" ")} data-embed="code">
      {code ? <pre><code>{code}</code></pre> : null}
      {texto || enlace ? (
        <figcaption>
          {texto ? <span>{texto}</span> : null}
          {enlace}
        </figcaption>
      ) : null}
    </figure>
  );
}