Skip to content
Learning Center

Demo des composants Starlight (Markdoc)

Cette page presente les composants integres de Starlight, rendus directement dans un document Markdoc.

Icones

Section titled “Icones”

Icones par defaut

Couleur + taille

Badges

Section titled “Badges”

Variantes

  • Note
  • Succes
  • Astuce
  • Attention
  • Danger

Tailles

  • Petit
  • Moyen
  • Grand

Encadres

Section titled “Encadres”

Cartes

Section titled “Cartes”

Carte simple

Contenu interessant a mettre en avant. Vous pouvez inclure du Markdown et du code inline comme pnpm run dev.

Carte avec icone

Sirius, Vega, Betelgeuse - quelques etoiles d'exemple.

Cartes de liens

Section titled “Cartes de liens”
Bien demarrer Accedez au guide de demarrage.
Documentation Starlight Documentation officielle des composants Starlight.
Astro docs Docs Astro (MDX, integrations, etc.).

Grille de cartes

Section titled “Grille de cartes”

Decalage 1

Cette grille utilise la prop stagger pour creer un effet en escalier.

Decalage 2

Vous pouvez melanger card et linkcard dans cardgrid.

Decalage 3

Texte de demonstration: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Boutons de lien

Section titled “Boutons de lien”

Commencer Reference de configuration Voir aussi: Astro

Onglets

Section titled “Onglets”

Sirius, Vega, Betelgeuse

Onglets synchronises (essayez les deux)

Section titled “Onglets synchronises (essayez les deux)”

Groupe A

Bellatrix, Rigel, Betelgeuse

Groupe B

HD 34445 b, Gliese 179 b, WASP-82 b

Etapes

Section titled “Etapes”
  1. Utilisez directement les tags Markdoc de Starlight dans votre fichier .mdoc.
  2. Entourez votre liste ordonnee avec {% steps %} et {% /steps %}.
  3. Gardez chaque etape courte, avec une seule action.

Bloc de code

Section titled “Bloc de code”
console.log("Ceci pourrait venir d'un fichier, d'une base de donnees, ou d'un CMS!");


function add(a, b) {
  return a + b;
}


console.log(add(2, 3));

Arborescence de fichiers

Section titled “Arborescence de fichiers”
  • astro.config.mjs
  • package.json
  • Directorysrc
    • Directorycomponents
      • Header.astro
      • Title.astro
    • Directorycontent
      • Directorydocs
        • Directoryguides
          • demo.mdx
          • demo-markdoc.mdoc
          • get-started.md
        • Directoryen
          • Directoryguides
            • demo.mdx
            • demo-markdoc.mdoc
            • get-started.md