La prose et le code ont des exigences de largeur fondamentalement différentes.
La prose bénéficie d’une largeur restreinte car les lignes de 50 à 75 caractères sont les plus rapides à lire, réduisent la fatigue oculaire et les mouvements, et vous permettent de passer facilement de la fin d’une ligne au début de la suivante.
Mais les blocs de code souffrent des restrictions de largeur. Ils forcent le défilement horizontal pour les longues lignes, cassent la structure du code et l’indentation, cachent les relations dans les appels de fonction et les structures de données, et rendent la copie et la compréhension difficiles.
Voici un exemple d’un de mes articles précédents avec mon ancien style Hugo :
Je dois faire défiler horizontalement pour lire le reste des paramètres passés à la fonction load_extension.
La Solution
Utilisez le wrapperClass de Hugo et une marge négative CSS pour laisser les blocs de code s’étendre au-delà de la largeur du texte tout en gardant la prose correctement aligné.
Étape 1 : Configurer Hugo
Ajoutez une classe CSS à tous les blocs de code dans votre config.yaml :
1markup:
2 highlight:
3 wrapperclass: highlight full-width-content
Étape 2 : Ajouter la magie CSS
Le CSS utilise une marge négative pour sortir du conteneur parent :
1.full-width-content {
2 margin-right: -50vw;
3 max-width: fit-content;
4 position: relative;
5}
Comment ça marche : Le -50vw (50% de la largeur de la fenêtre) suppose que votre contenu est à peu près centré et nous ciblons seulement la marge droite car nous voulons rester aligné à gauche et nous étendre vers la droite. Le fit-content assure que le bloc de code ne s’étende que selon ses besoins, et position: relative le maintient dans le flux du document.
Le Résultat
Parfait ! Le texte reste lisible tandis que le code obtient l’espace dont il a besoin.
Considérations
fit-contentest supporté par tous les navigateurs modernes- Sur les écrans très étroits, vous pourriez vouloir ajouter une media query pour désactiver ce comportement
- Assurez-vous que votre contenu principal est centré pour que l’astuce
-50vwfonctionne efficacement