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.
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.
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} />
{% code code="console.log('¡Esto podría provenir de un archivo o CMS!');" lang="js" title="example.js" meta="'archivo' 'CMS'" /%}
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.
import { Code } from '@astrojs/starlight/components';import importedCode from '/src/env.d.ts?raw';
<Code code={importedCode} lang="ts" title="src/env.d.ts" />
/// <reference path="../.astro/types.d.ts" />/// <reference types="astro/client" />
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”.