Comment personnaliser les liens et les infobulles dans Markdown

L’éditeur Markdown prend en charge la syntaxe standard des liens et, via le HTML en ligne, une gamme d’améliorations — infobulles pour le survol du texte, stylisation des liens, ouverture de liens dans de nouveaux onglets, et icônes ou emojis personnalisés. Cet article couvre toutes ces techniques.

Quand utiliser ces techniques

Liens d’ancrage internes — aident les lecteurs à accéder à une section spécifique d’un long article sans avoir à faire défiler.
Liens inter-articles — reliez les articles connexes dans votre base de connaissances pour guider les lecteurs à travers un sujet.
Infobulles — expliquez les abréviations, les termes techniques ou les détails optionnels en ligne sans encombrer la page.
Liens stylisés — utilisez du texte de lien en gras ou en italique pour attirer l’attention sur les références importantes.
Ouvrir dans un nouvel onglet — gardez les lecteurs sur l’article en cours tout en leur permettant d’ouvrir une référence en arrière-plan.
Icônes et emojis — ajoutez des signaux visuels aux signalements, étiquettes ou indicateurs de statut.

Petite référence

But	Syntaxe
Liaison d’ancrage interne	`[Link text](#heading-slug)`
Lien croisé des articles	`[Link text](../article-slug)`
Lien avec infobulle	`[Link text](#section "Tooltip text")`
Texte du lien en gras	`[Bold text](url)`
Texte du lien en italique	`[_Italic text_](url)`
Ouvrir dans un nouvel onglet	`<a href="url" target="_blank">Link text</a>`
Passez l’infobulle sur le texte	`<span title="Full term">Abbreviation</span>`
Emoji en ligne	Collez directement — 📌 ⚠️ ✅
Icône en ligne depuis l’URL	`<img src="icon-url" width="16" height="16"> Label`

Comment ajouter des liens dans Markdown

Liaisons d’ancrage internes

Un lien d’ancrage interne conduit les lecteurs à un titre spécifique au sein du même article.

Ajoutez un titre dans votre article. Par exemple :
```
## How it works
```
Créez le lien en utilisant ce motif :
- Texte de lien entre crochets [ ]
- # suivi du texte du titre entre parenthèses ( )
- Convertir l’en-tête en minuscules et remplacer les espaces par des traits d’union
```
[Jump to How it works](#how-it-works)
```
Lorsqu’un lecteur clique sur ce lien, il est directement dirigé vers la ## How it works section.

ASTUCE PRO

Les liens d’ancrage sont insensibles à la majuscule et les espaces deviennent automatiquement des traits d’union. Retirez tous les caractères spéciaux de l’en-tête avant de construire la limace d’ancre.

Liens croisés d’articles

Pour accéder à un autre article dans votre base de connaissances, utilisez le slug de l’article précédé ../ de pour avancer d’un niveau par rapport à la position actuelle de l’article.

[Go to Getting Started](../getting-started)

Ce lien monte d’un niveau par rapport à l’article actuel et ouvre l’article Getting Started .

Ajouter une infobulle à un lien

Ajoutez une infobulle qui apparaît en survolant en mettant le texte entre guillemets après la cible du lien, entre parenthèses.

[Troubleshooting guide](#troubleshooting "Click to view troubleshooting section")

En survolant les liens affichés : Cliquez pour voir la section de dépannage.

Texte du lien de style

Appliquez un format gras ou italique au texte de lien en enroulant le texte entre crochets avec la syntaxe standard Markdown.

[**Important update**](../release-notes)
[_Read the guide_](../setup-guide)

Markdown editor showing a bold link and an italic link rendered in the article preview.

Ouvrir un lien dans un nouvel onglet

Par défaut, les liens Markdown s’ouvrent dans le même onglet. Utilisez plutôt une balise HTML <a> pour target="_blank" ouvrir le lien dans un nouvel onglet.

<a href="https://docs.document360.com/docs/getting-started" target="_blank">Go to Getting Started</a>

Comment ajouter des infobulles de survol au texte

Utilisez la balise HTML <span> avec un title attribut pour afficher une infobulle lorsque le lecteur survole un mot ou une expression — pas seulement des liens.

<span title="display-text">term</span>

Exemple — développer une abréviation sur survol :

<span title="Search Engine Optimization">SEO</span>

Survoler les écrans SEO : optimisation pour les moteurs de recherche.

Markdown editor showing the span title code snippet for the SEO tooltip example.

Résultat :

Rendered article showing the SEO abbreviation with a tooltip displaying Search Engine Optimization on hover.

Comment ajouter des icônes et des emojis

Utilisation des emojis

Copiez-collez directement des emojis dans votre contenu. Ils s’affichent en ligne sans syntaxe supplémentaire.

📌 Important note
⚠️ Caution
✅ Completed

Utilisation d’icônes à partir d’une URL

Utilisez une balise HTML <img> pour insérer une icône à partir d’une URL externe en ligne avec votre texte.

<img src="https://img.icons8.com/color/48/000000/info.png" width="16" height="16"> Information

Remplacez l’URL src , width, height, et étiquetez le texte par vos valeurs requises.

Markdown editor showing an inline icon rendered next to text using an HTML img tag with an external URL.

Meilleures pratiques

Utilisez un texte descriptif du lien — évitez « cliquez ici » ou « lire la suite ». Utilisez un texte indiquant aux lecteurs où mène le lien, comme « Guide de démarrage » ou « Référence API ».
Testez les liens d’ancrage après avoir modifié les titres — si vous renommez un titre, tous les liens d’ancrage pointant vers celui-ci se briseront. Mettez à jour le slug dans tous les liens qui font référence à l’en-tête.
Utilisez les infobulles pour les abréviations, pas les définitions — les infobulles sont lues uniquement en survol et ne sont pas accessibles à tous les utilisateurs. Pour les définitions essentielles, incluez l’explication dans le texte principal.
Gardez l’utilisation cohérente des emojis et des icônes — convenez d’un petit ensemble d’icônes ou d’emojis pour votre base de connaissances (par exemple, ⚠️ pour les avertissements, ✅ les étapes complétées) et utilisez-les de manière cohérente dans les articles.

Documentation Index