Comment souligner dans Markdown
Le guide complet des soulignements en démarque. Apprenez à souligner les mots et à mettre en forme les soulignements dans Markdown afin que tout s'affiche correctement après la publication.
Contrairement au formatage gras et italique, il n’existe pas de syntaxe de soulignement native intégrée au langage. Markdown a été conçu pour correspondre étroitement au HTML, et comme le texte souligné est facilement confondu avec les hyperliens sur le Web, les créateurs l'ont intentionnellement laissé de côté.
Cela ne veut pas dire que vous n’avez pas de chance. Il existe plusieurs façons fiables de souligner dans le markdown en fonction de la plate-forme que vous utilisez et du contrôle que vous avez sur le résultat rendu.
Ce guide passe en revue toutes les méthodes afin que vous puissiez souligner le texte markdown dans n'importe quelle situation.
Pourquoi Markdown n'a pas de syntaxe de soulignement
Markdown a été créé par John Gruber en 2004 comme moyen simple d'écrire du contenu qui se convertit proprement en HTML. Le gras utilise des astérisques doubles, l'italique utilise des astérisques simples et le barré utilise des tildes dans certaines versions. Mais le soulignement a été délibérément exclu.
Le raisonnement est pratique. Sur le Web, le texte souligné signale presque toujours un lien cliquable. Si le démarque permettait le soulignement natif, les lecteurs confondraient constamment les mots soulignés avec des hyperliens, créant ainsi une expérience déroutante. La plupart des guides de style pour le contenu Web déconseillent également le soulignement pour la même raison.
Il existe néanmoins des cas légitimes où vous devez souligner le texte dans le markdown, comme dans les écrits académiques, les documents formels ou les plateformes où les liens sont stylisés différemment.
Comment souligner dans Markdown en utilisant HTML
La méthode la plus largement prise en charge pour souligner le texte markdown consiste à utiliser directement la balise HTML <u> :
This is <u>underlined text</u> in a sentence.
Cela s'affiche comme suit : Ceci est un texte souligné dans une phrase.
Étant donné que la plupart des analyseurs de démarques autorisent le HTML en ligne, cette approche fonctionne sur GitHub, GitLab, Jupyter Notebooks et de nombreux générateurs de sites statiques. Il s’agit de la réponse la plus simple pour quiconque cherche des moyens de créer une syntaxe de soulignement markdown, même si elle utilise techniquement du HTML plutôt que du markdown pur.
Lorsque la balise <u> peut ne pas fonctionner
Certaines plateformes suppriment les balises HTML pour des raisons de sécurité. Discord, Slack et certains éditeurs CMS ignoreront ou supprimeront entièrement les balises <u>. Si vous travaillez dans l’un de ces environnements, vous aurez besoin d’une approche différente.
Utiliser CSS pour souligner le texte dans Markdown
Si vous avez accès à des styles personnalisés, CSS vous offre le plus de flexibilité. Vous pouvez utiliser une balise <span> avec un style en ligne :
This is <span style="text-decoration: underline;">underlined text</span> in a sentence.
Alternativement, si vous contrôlez la feuille de style de votre site ou de votre documentation, vous pouvez définir une classe personnalisée :
.underline {
text-decoration: underline;
}
Utilisez-le ensuite dans votre démarque :
This is <span class="underline">underlined text</span> in a sentence.
Cette méthode est idéale pour les blogs, les sites de documentation et tout environnement dans lequel vous gérez le CSS. Il garde votre démarque plus propre que les styles en ligne et vous offre un formatage cohérent sur l'ensemble du projet.
Markdown souligné sur des plates-formes spécifiques
Différentes plates-formes gèrent le formatage souligné à leur manière. Voici comment l’aborder dans les environnements les plus courants.
###GitHub
GitHub Flavored Markdown prend en charge le HTML en ligne, de sorte que la balise « » fonctionne dans les fichiers README, les problèmes, les descriptions de demandes d'extraction et les commentaires. Cela en fait la méthode de soulignement la plus simple pour les utilisateurs de GitHub.
Carnets Jupyter
Jupyter restitue les cellules de démarque avec une prise en charge HTML complète. La balise <u> et les approches basées sur CSS fonctionnent de manière fiable. Vous pouvez également utiliser la balise <ins>, qui représente sémantiquement le texte inséré mais s'affiche avec un soulignement par défaut :
This is <ins>underlined text</ins> in a notebook.
Discorde et Slack
Ni Discord ni Slack ne prennent en charge le soulignement de manière native. Discord utilise sa propre variante de démarque, mais elle n'inclut aucune syntaxe de soulignement. Slack utilise entièrement son propre système de formatage. Dans les deux cas, il n’existe aucune solution de contournement dans l’entrée de messagerie elle-même.
Obsidian et applications de prise de notes
Certaines applications de prise de notes comme Obsidian prennent en charge les extraits CSS personnalisés. Si votre application le permet, vous pouvez définir une classe de soulignement dans votre CSS et la référencer dans vos notes. Consultez la documentation de votre application spécifique pour plus de détails sur l'activation des styles personnalisés.
Utiliser la balise <ins> comme alternative
La balise <ins> est un élément HTML qui représente le texte inséré dans un document. Les navigateurs le rendent souligné par défaut, ce qui en fait une alternative sémantique à la balise <u> :
The meeting is on <ins>Thursday</ins>, not Wednesday.
La différence entre <u> et <ins> concerne principalement la signification. Utilisez <u> lorsque vous souhaitez simplement un soulignement visuel. Utilisez <ins> lorsque vous souhaitez indiquer que du texte a été ajouté ou modifié, comme dans une révision ou un historique de modifications.
Les deux balises produisent le même résultat visuel dans la plupart des analyseurs de démarques prenant en charge HTML.
Solutions de contournement lorsque HTML n'est pas pris en charge
Si vous travaillez sur une plate-forme qui supprime les balises HTML et ne prend pas en charge le soulignement, vos options sont limitées. Voici quelques solutions de contournement courantes que les gens utilisent :
Faux soulignement avec des caractères Unicode. Vous pouvez utiliser des caractères de combinaison Unicode pour simuler un soulignement, mais cela n'est pas fiable sur toutes les polices et plates-formes et n'est généralement pas recommandé.
Utilisez plutôt le gras ou l'italique. Si l'objectif est simplement d'attirer l'attention sur un texte spécifique, le formatage en gras ou en italique peut avoir le même objectif sans qu'il soit nécessaire de le souligner.
Ajoutez une note entre parenthèses. Dans les environnements de texte brut, certains auteurs indiquent l'accentuation en ajoutant une note du type "(c'est moi qui souligne)" après le texte concerné.
Aucun de ces éléments ne remplace véritablement le texte souligné markdown, mais ils peuvent être utiles dans des environnements contraints.
Référence rapide
Voici un résumé de chaque méthode pour souligner du texte en démarque :
<u>text</u>est la méthode la plus simple et la plus largement prise en charge.<ins>text</ins>est une alternative sémantique qui s'affiche également comme souligné.- CSS avec les balises
<span>donne le plus de contrôle lorsque vous gérez la feuille de style. - Aucune syntaxe de soulignement native n'existe, donc toutes les méthodes reposent sur des fonctionnalités HTML ou spécifiques à la plate-forme.
- GitHub et Jupyter prennent en charge le soulignement HTML.
- Discord et Slack ne prennent en charge aucune forme de formatage souligné.
Réflexions finales
L’absence d’une syntaxe de soulignement de démarque intégrée est un choix de conception délibéré et non un oubli. Pour la plupart des contenus Web, éviter les soulignements permet de garder votre texte clair et d'éviter toute confusion avec les liens. Mais lorsque vous devez souligner du texte dans markdown, la balise <u> est la solution la plus rapide et la plus portable. Choisissez la méthode qui correspond à votre plate-forme, gardez la lisibilité à l’esprit et vos documents auront exactement l’apparence que vous souhaitez.