Pour afficher entièrement une longue ligne de code Markdown, conservez le code intact et ajustez sa présentation. Ce guide aide les utilisateurs de Mac à diagnostiquer les exemples tronqués, à activer le retour à la ligne dans la vue Lecture d’Obsidian et à comprendre ce qui est transposable à GitHub.

Qu’est-ce qui détermine si une ligne de code revient à la ligne ?

Un bloc de code délimité préserve le code comme contenu littéral. CommonMark définit ses délimiteurs ouvrants et fermants ainsi que la manière dont le contenu est analysé ; il ne fournit aucun mécanisme portable pour le retour à la ligne des longues lignes. Sa spécification actuelle correspond à la version 0.31.2. Spécification CommonMark, blocs de code délimités.

GitHub Flavored Markdown suit les mêmes règles fondamentales pour les blocs délimités. Sa spécification ne prescrit pas non plus d’instruction de retour à la ligne dans la chaîne d’information du délimiteur. Ajouter wrap après un nom de langage ne garantit donc pas un comportement portable de retour à la ligne. La spécification GFM publiée indique la version 0.29-gfm ; son numéro de version ne doit pas être confondu avec celui de la version actuelle de CommonMark. Spécification GitHub Flavored Markdown.

Pour cette tâche, distinguez trois résultats :

Résultat Ce que voit le lecteur Faut-il modifier la source de l’exemple ?
Retour à la ligne visuel Une ligne source occupe plusieurs lignes à l’écran Non
Défilement horizontal La ligne dépasse la zone visible, mais reste accessible Non
Sauts de ligne manuels L’exemple contient des lignes source supplémentaires Oui

En pratique, choisissez le retour à la ligne si vous voulez voir la ligne entière dans le volet, ou le défilement si la préservation de l’alignement visuel est importante. Pour les sauts de ligne manuels, vérifiez séparément que l’exemple conserve le même sens.

La distinction entre source et présentation est explicite en CSS : le traitement des espaces influe sur le rendu sans modifier les données sous-jacentes du document. Le retour à la ligne visuel est donc un bon point de départ lorsque l’exemple doit rester copiable sur une seule ligne. Module CSS Text, niveau 3.

Vérifiez d’abord si l’exemple est incomplet ou simplement hors de vue

Avant de modifier une longue commande ou expression, inspectez la source. Dans Obsidian, sélectionnez Mode source à l’aide du contrôle du mode d’édition. Pour comparer le rendu sur Mac, utilisez Cmd+E pour basculer entre l’édition et la vue Lecture. Obsidian distingue ces vues de l’aperçu en direct, qui est un mode d’édition. Vues et mode d’édition.

Utilisez ce test synthétique dans une note séparée. Copiez le Markdown intérieur, y compris les lignes contenant les trois accents graves ouvrants et fermants. Le contenu est volontairement du texte brut et non une commande à exécuter.

```text
BEGIN sample=amber notebook=desktop layout=wide description=This synthetic example contains a deliberately long line so you can check whether the final marker remains visible when the note pane becomes narrow END
```

Rétrécissez le volet de la note et cherchez END. S’il apparaît sur une ligne de continuation, le retour à la ligne fonctionne. Si un déplacement horizontal dans le bloc le révèle, le contenu est accessible par défilement. S’il reste inaccessible, comparez le bloc rendu à la source avant de conclure que du texte a été supprimé.

Ce test distingue deux problèmes qui nécessitent des solutions différentes : si le contenu source est absent, il faut restaurer l’exemple ; s’il est présent mais inaccessible, il faut ajuster l’affichage. Laissez le test inchangé pendant que vous essayez les réglages afin de pouvoir attribuer toute amélioration au réglage modifié.

Vérifiez aussi les délimiteurs. Un délimiteur fermant doit utiliser le même caractère que celui d’ouverture et contenir au moins autant de caractères. Un délimiteur correspondant à l’intérieur d’un exemple peut fermer le bloc prématurément. Spécification CommonMark, blocs de code délimités. Pour présenter la syntaxe Markdown, un délimiteur extérieur de quatre accents graves peut afficher un bloc intérieur de trois accents graves, comme ci-dessus. Créer et mettre en évidence des blocs de code.

Donnez plus d’espace à la note Obsidian avant d’ajouter du CSS

Ouvrez Paramètres → Éditeur et cherchez Longueur de ligne lisible. Obsidian décrit ce réglage comme une limite à la longueur maximale des lignes. Désactivez-le temporairement, puis comparez la même note de test avec la même taille de fenêtre. Il s’agit d’un ajustement de largeur ; la documentation ne le décrit pas comme une option de retour à la ligne des blocs de code. Paramètres.

Si l’exemple entier tient maintenant, l’ajustement de largeur peut suffire pour votre disposition sur ordinateur. Faites un essai avec un volet plus étroit avant de vous décider : l’espace supplémentaire dans une disposition de fenêtre ne permet pas de savoir si la ligne reste lisible dans une autre.

Évitez de modifier Sauts de ligne stricts pour corriger le débordement du code. Obsidian indique que ce réglage concerne les sauts de ligne Markdown, tandis que le code délimité est traité comme du contenu littéral. Il répond à un autre problème de mise en forme. Paramètres, Spécification CommonMark, blocs de code délimités.

Faire revenir à la ligne les longues lignes de code dans la vue Lecture d’Obsidian

Pour certaines notes, utilisez le mécanisme documenté des extraits CSS d’Obsidian et la propriété cssclasses. Le code ci-dessous est une personnalisation originale fondée sur ce mécanisme et sur le comportement CSS standard. Il est destiné aux blocs délimités ordinaires rendus dans la vue Lecture ; ce n’est ni un préréglage de retour à la ligne fourni par Obsidian ni une configuration du mode éditeur. Extraits CSS.

Créer et activer l’extrait

  1. Ouvrez Paramètres → Apparence → Extraits CSS.
  2. Sélectionnez Ouvrir le dossier des extraits.
  3. Dans un éditeur de texte brut, créez wrap-code.css dans ce dossier et enregistrez-y le CSS ci-dessous.
  4. Revenez à Extraits CSS, sélectionnez Recharger les extraits, puis activez wrap-code.

Il s’agit des étapes d’installation sur ordinateur documentées par Obsidian. Une fois l’extrait activé, les modifications enregistrées sont normalement appliquées automatiquement. Extraits CSS.

.wrap-code pre,
.wrap-code pre code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}

Ajoutez ce bloc de propriétés au début de la note de test. Si elle contient déjà des propriétés, ajoutez wrap-code aux valeurs existantes de cssclasses au lieu d’insérer un second bloc de propriétés.

---
cssclasses:
  - wrap-code
---

Obsidian indique que cssclasses permet d’appliquer du CSS personnalisé à certaines notes. Ici, .wrap-code limite la règle à ces notes ; les autres sélecteurs ciblent les blocs préformatés rendus et leur contenu de code. Cette règle ne configure pas la surface d’édition. Extraits CSS.

Comprendre les changements apportés par le CSS

La déclaration white-space: pre-wrap préserve les espaces et les sauts de ligne de la source tout en autorisant le retour à la ligne visuel. La déclaration overflow-wrap: anywhere permet aussi de couper une chaîne qui ne peut normalement pas être séparée lorsqu’il le faut, sans insérer de trait d’union. Ensemble, elles traitent aussi bien les longues lignes contenant des espaces que les longues séquences sans interruption. Module CSS Text, niveau 3, Propriété CSS overflow-wrap.

Évitez de remplacer cela par white-space: normal : cette valeur fusionne les espaces, ce qui peut modifier l’indentation visuelle que vous cherchez à préserver. De plus, overflow-wrap ne suffit pas à lui seul à outrepasser une règle d’espacement qui interdit le retour à la ligne. Propriété CSS white-space, Module CSS Text, niveau 3.

Revenez à la vue Lecture, rétrécissez le volet et vérifiez de nouveau END. Copiez ensuite le contenu du test dans un éditeur de texte brut et comparez-le à l’original. Le résultat attendu est constitué de plusieurs lignes affichées contenant la même ligne source unique. Cette vérification par copie confirme le comportement réel de votre moteur de rendu et de votre thème installés.

Tenez compte des différences entre moteurs de rendu

Une personnalisation de l’apparence d’Obsidian ne fait pas partie de la syntaxe Markdown portable du bloc délimité. Lorsque vous déplacez l’exemple ailleurs, testez séparément la destination. Utilisez cette comparaison pour déterminer ce qu’il faut vérifier :

Destination À quoi se fier Éléments à vérifier séparément
Implémentation CommonMark Analyse documentée des blocs délimités Retour à la ligne, défilement et largeur d’affichage disponible
Markdown rendu par GitHub Délimiteurs et identifiants de langage documentés par GitHub Présentation des blocs de code dans la destination réelle
Vue Lecture d’Obsidian Note rendue et style local activé Compatibilité de l’extrait avec le thème actuel
Aperçu en direct ou Mode source d’Obsidian Mode d’édition sélectionné Présentation dans l’éditeur ; l’extrait ci-dessus ne la configure pas

Les limites syntaxiques sont définies dans la spécification CommonMark, la documentation de GitHub sur les blocs de code et la documentation d’Obsidian sur les vues.

GitHub indique que l’identifiant de langage placé après le délimiteur ouvrant active la coloration syntaxique. Changer text pour un autre identifiant de langage ne constitue donc pas, d’après sa documentation, un moyen de demander le retour à la ligne. Conservez l’identifiant approprié à l’exemple et gérez l’affichage dans le moteur de rendu qui le contrôle. Créer et mettre en évidence des blocs de code.

Lorsque vous ne pouvez pas contrôler la présentation de la destination, choisissez entre conserver la ligne intacte en utilisant les moyens de navigation proposés par cette destination et réécrire l’exemple en lignes source plus courtes et valides. Cette réécriture doit respecter le langage ou le format de l’exemple ; les délimiteurs Markdown ne peuvent pas rendre valide un saut de ligne arbitraire ajouté à la source.

Résoudre le problème sans supprimer du contenu nécessaire

Si la règle Obsidian semble sans effet, procédez dans cet ordre :

  1. Vérifiez que vous testez la vue Lecture.
  2. Vérifiez que wrap-code.css apparaît dans Extraits CSS et qu’il est activé.
  3. Vérifiez que cssclasses de la note contient exactement wrap-code.
  4. Désactivez puis réactivez l’extrait tout en affichant la note de test inchangée.
  5. Si nécessaire, désactivez temporairement les autres extraits et comparez avec le thème par défaut d’Obsidian pour isoler un conflit de styles.
  6. Recommencez le test avec l’exemple réel avant de considérer la tâche terminée.

Considérez la règle de sélecteurs comme une personnalisation à vérifier dans votre installation. Un thème ou un moteur de rendu spécialisé pour certains blocs peut utiliser d’autres styles ou une autre structure. Si le test du bloc délimité simple fonctionne, mais pas le bloc réel, cette différence constitue un indice utile : examinez le moteur de rendu du bloc réel au lieu d’ajouter des sauts de ligne à l’aveugle.

Pour la vérification finale, confirmez que le dernier caractère est accessible, que l’indentation reste compréhensible, que le texte copié correspond à la source prévue et que l’exemple fonctionne dans la vue où il sera lu. Conservez la source complète, choisissez délibérément le retour à la ligne ou le défilement, et testez chaque destination pertinente.

Sources