Typographie & Markdown : tous les éléments de texte rendus par ce thème

Cet article est la page de test typographique du thème. Si vous modifiez les polices, la taille de la prose ou tout élément de la pile typographique prose-chirpy, ouvrez cette page en mode clair et sombre et vérifiez que tout reste équilibré.

La police de corps est Source Sans 3, la police de code est JetBrains Mono, et la colonne de prose est plafonnée à --width-prose (50 rem) pour que la longueur de ligne reste confortable.

Paragraphes et formatage en ligne

Vous pouvez écrire en gras, italique, barré, code en ligne, ou imbriqué gras italique. Les URL longues deviennent cliquables : visitez astro.build. Les liens externes s’ouvrent dans un nouvel onglet avec rel="nofollow noopener" grâce à rehype-external-links.

Utilisez la balise <kbd> pour les raccourcis clavier : appuyez sur

Cmd + K ou / pour ouvrir la modale de recherche.

« La typographie est l’art de donner au langage humain une forme visuelle durable. » — Robert Bringhurst

Un deuxième paragraphe maintient le rythme. Hauteur de ligne, marge verticale et largeur maximale sont calibrées pour une lecture confortable sur mobile et desktop.

Titres

Les titres sont auto-slugifiés par rehype-slug et reçoivent une ancre au survol par rehype-autolink-headings — survolez la gauche d’un titre pour révéler le lien #.

Titre de niveau 3

La table des matières flottante de droite affiche les H3 uniquement quand vous êtes dans la section H2 parente.

Titre de niveau 4

Les H4 sont supportés et stylés, mais denses — à utiliser seulement quand c’est vraiment nécessaire.

Listes

Liste non ordonnée :

• Un premier élément avec un lien vers l’accueil.
• Un deuxième élément avec du texte en gras et du code.
• Un élément imbriqué :
  • Avec ses propres enfants.
  • Et un élément encore plus profond.
    • Trois niveaux, sans souci.

Liste ordonnée :

1. Choisir un sujet.
2. Faire le plan — H2 pour les sections, H3 pour les sous-sections.
3. Écrire un premier jet d’un trait, sans rien éditer.
4. Dormir dessus.
5. Éditer sans pitié.

Liste de tâches GFM (grâce à remark-gfm) :

• Brancher Tailwind v4
• Bouton de bascule de thème animé
• Routage bilingue
• Atteindre la fin de cette page

Citations

Une citation sur une ligne.

Une citation multi-lignes.

Citation imbriquée pour insister sur un sous-point — rare, mais le thème la gère élégamment.

Suite de la citation extérieure après le fragment imbriqué.

Tableaux

Code en ligne et raccourcis clavier

Utilisez du code en ligne pour les identifiants (SITE.showFeaturedImages) ou les snippets courts (bun astro dev). Dans les tableaux et les listes il reste lisible grâce à un fond légèrement atténué.

Blocs de code

Un exemple court — l’article dédié aux blocs de code détaille toutes les options Expressive Code.

import { getCollection, type CollectionEntry } from 'astro:content';
import { SITE, type Locale } from '../config';

export function shouldShowHero(post: CollectionEntry<'posts'>): boolean {
  if (!post.data.heroImage) return false;
  return post.data.showFeaturedImage ?? SITE.showFeaturedImages;
}

Callouts

Le thème embarque un composant MDX <Callout> à quatre variantes sémantiques. Elles héritent des couleurs sémantiques de daisyUI, donc restent lisibles dans les deux thèmes.

En Markdown pur, vous pouvez aussi utiliser la classe CSS bas-niveau :

Images

Les images Markdown en ligne occupent toute la largeur de la prose :

Une figure légendée avec <figcaption> :

Filets horizontaux

À utiliser avec parcimonie pour marquer un changement de sujet fort :

Après un filet horizontal, ce qui suit (texte, code, images) reçoit une marge supérieure fraîche pour repartir nettement.

Listes de définitions

Terme : Définition du terme, rendue avec une légère indentation.

Autre terme : Avec une définition plus longue sur plusieurs lignes, utile pour le contenu de type glossaire.

Mathématiques (en ligne)

Pour des maths LaTeX complètes, il faut activer math: true (voir l’article sur KaTeX). Cette page n’active intentionnellement pas le drapeau pour vérifier que les styles KaTeX ne se chargent pas.

Conclusion

Si quelque chose ici cloche — espacement irrégulier, titres trop gros, couleurs de code illisibles en mode sombre — c’est une régression. Cette page est votre filet de sécurité.