Código

El componente <Code> muestra código con resaltado de sintaxis. Es útil cuando no es posible usar un bloque de código de Markdown, por ejemplo, para mostrar datos provenientes de fuentes externas como archivos, bases de datos o APIs.

Preview

example.md

## Bienvenido

¡Hola desde **el espacio**!

Importación

import { Code } from '@astrojs/starlight/components';

Uso

Usa el componente <Code> para renderizar código con resaltado de sintaxis, por ejemplo, al mostrar código obtenido de fuentes externas.

Ver la documentación de Expressive Code “Componente de código” para obtener detalles completos sobre cómo usar el componente <Code> y la lista de props disponibles.

MDX

import { Code } from '@astrojs/starlight/components';

export const exampleCode = `console.log('¡Esto podría provenir de un archivo o CMS!');`;
export const fileName = 'example.js';
export const highlights = ['archivo', 'CMS'];

<Code code={exampleCode} lang="js" title={fileName} mark={highlights} />

Markdoc

{% code
   code="console.log('¡Esto podría provenir de un archivo o CMS!');"
   lang="js"
   title="example.js"
   meta="'archivo' 'CMS'" /%}

Preview

example.js

console.log('¡Esto podría provenir de un archivo o CMS!');

Mostrar código importado

En los archivos MDX y componentes de Astro, usa el sufijo de importación ?raw de Vite para importar cualquier archivo de código como un string. Puedes pasar este string importado al componente <Code> para incluirlo en tu página.

src/content/docs/example.mdx

import { Code } from '@astrojs/starlight/components';
import importedCode from '/tsconfig.json?raw';

<Code code={importedCode} lang="json" title="tsconfig.json" />

Preview

tsconfig.json

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"]
}

Props de <Code>

Implementación: Code.astro

El componente <Code> acepta todas las propiedades documentadas en la documentación de Expressive Code “Componente de código”.