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

Importación de componentes

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.

Ejemplo de uso

<Code code={code.exampleMDX} lang="js" title={`exampleCode.js`} />

Preview:

exampleCode.js

---
title: Bienvenido a mi documentación
---

import { Icon } from "@astrojs/starlight/components";
import CustomCard from "../../components/CustomCard.astro";

<Icon name="open-book" />

<CustomCard>
  Los componentes también pueden contener **contenido anidado**.
</CustomCard>