Tutoriel

Guide : tous les blocs disponibles pour vos articles

Titres, listes, citations, code… Ce tutoriel présente tous les blocs Markdown pris en charge par le blog et la façon dont chacun s'affiche.

Un article de ce blog est un simple fichier Markdown : src/content/blog/en/my-slug.md pour l’anglais, src/content/blog/fr/my-slug.md pour le français — même nom de fichier, même article. Cet article de référence montre comment chaque bloc disponible s’affiche.

Titres de section

Un titre de niveau 2 (##) structure l’article, exactement comme celui juste au-dessus. C’est le seul niveau de titre utilisé dans le corps d’un article.

Paragraphes

Un paragraphe est un simple bloc de texte. Il peut contenir du gras, de l’italique et du code en ligne pour citer un nom de fichier ou une commande.

Listes

Les listes à puces reprennent le style « losange jaune » de la marque :

Citations

Une citation est mise en avant dans un bloc sombre avec la grande guillemet jaune :

Un bon outil pédagogique est celui qu’on oublie — il ne doit jamais se dresser entre l’apprenant et le savoir.

Blocs de code

Un bloc de code se place entre triples backticks, avec un langage optionnel :

const posts = await getCollection('blog');
const english = posts.filter((p) => p.id.startsWith('en/'));
console.log(`${english.length} articles in English`);

Images

Une image se trouve dans src/assets/blog/ (partagé entre les deux langues) et est référencée avec un chemin relatif. Au moment du build, sharp la convertit en WebP et génère plusieurs largeurs (srcset) — le navigateur télécharge la taille qui lui convient :

Une fenêtre d'éditeur de code, style pixel DVC

Le frontmatter

Chaque fichier commence par un en-tête YAML : title, excerpt, date, author, category, tags, readTime, illu, accent, plus le drapeau featured pour la une. La catégorie et l’illustration sont choisies parmi les ensembles fixes du studio — le build échoue sur une valeur inconnue, donc impossible de se tromper silencieusement.

AL
Aymeric Lamboley
Fondateur & Directeur technique