Skip to content
Alebat

Uso de componenes de Starlight

Puedes usar un componente importándolo en tu archivo MDX y luego renderizándolo como una etiqueta JSX. Estos se ven como etiquetas HTML pero comienzan con una letra mayúscula que coincide con el nombre en tu declaración de import

exampleImport.js
import { Code } from "@astrojs/starlight/components"

Usando un componente en MDX

src/content/docs/example.mdx
---
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>

Debido a que Starlight está impulsado por Astro, puedes agregar soporte para componentes construidos con cualquier framework de UI compatible (React, Preact, Svelte, Vue, Solid y Alpine) en tus archivos MDX

Componentes de Starlight

Listado de todos los componentes de Starlight (simplemente haz clic en el enlace para ver la documentación):

  1. Tarjetas
  2. Tarjetas de enlace
  3. Cuadrículas de tarjetas
  4. Apartados
  5. Insignias
  6. Código
  7. Árbol de archivos
  8. Iconos
  9. Botones de enlace
  10. Pasos
  11. Pestañas

Títulos en el código

Añadiendo un título a tu bloque de código, puedes darle contexto y hacer que sea más fácil de entender. Puedes añadir un título a tu bloque de código utilizando la siguiente sintaxis:

Instalando dependencias…
function thisIsJavaScript() {
  // ¡El bloque completo se resalta como JavaScript,
  // y aún podemos añadir marcadores de diferencias a él!
  console.log("Código antiguo a eliminar");
  console.log("¡Nuevo y brillante código!");
}

Otras características comunes de Markdown

Starlight admite todas las demás sintaxis de autoría de Markdown, como listas y tablas. Puedes consultar la Guía de referencia de Markdown para obtener una descripción general rápida de todos los elementos de sintaxis de Markdown.

Configuración avanzada de Markdown y MDX

Starlight utiliza el motor de renderizado de Markdown y MDX de Astro, construido sobre remark y rehype. Puedes añadir soporte para sintaxis y comportamientos personalizados añadiendo remarkPlugins o rehypePlugins en tu archivo de configuración de Astro. Consulta la sección “Plugins de Markdown” en la documentación de Astro para obtener más información.

Más información en la documentación de Starlight