Cet article est une référence pratique pour réutiliser les extensions Markdown du blog. Tu peux t’en inspirer ou copier-coller les snippets dans tes propres fichiers .md du dossier articles/.
Image avec légende (ArticleImage)
La légende est dérivée de l’attribut alt : tout ce qui suit |caption= devient le texte de la <figcaption> (SEO + accessibilité : la partie avant reste le vrai alt de l’image).
Rendu ci-dessous :
Image sans légende
Sans |caption=, seul l’alt classique est utilisé (pas de légende sous la photo).
Rendu :
Étapes numérotées (TutorialStepsList)
Ouvre un bloc de code avec le langage steps (trois backticks + steps sur la première ligne). Chaque étape commence par une ligne ### suivie du titre, puis le corps (texte, retours à la ligne, markdown inline comme code).
```steps
### Première étape
Contenu de l’étape. Tu peux utiliser plusieurs lignes.
La ligne vide crée un paragraphe visuel grâce au rendu.
### Deuxième étape
Lance `pnpm install` dans le dossier du projet.
### Troisième étape
Exécute `pnpm dev` puis ouvre http://localhost:3000
```
Rendu :
Cloner le dépôt (exemple)
Place-toi dans le dossier où tu veux le projet, puis clone et entre dans le dossier :
git clone https://github.com/exemple/mon-repo.git cd mon-repo
Installer les dépendances
Lance pnpm install (ou npm install / yarn selon ton projet).
Démarrer en local
Exécute pnpm dev puis ouvre ton navigateur sur l’URL affichée dans le terminal (souvent http://localhost:3000).
Rappel rapide
- Image + légende — même syntaxe que l’exemple du § « Image avec légende » (
altcourt, puis|caption=+ légende avant la parenthèse fermante dusrc). - Image simple —
. - Tutoriel en étapes — fence
steps+ une section par### Titresuivie du corps (voir § « Étapes numérotées »).
Tu peux supprimer ce fichier ou le retirer du dossier articles/ quand tu n’en as plus besoin ; il apparaîtra dans la liste du blog tant qu’il est présent.