EDDYMENS

Last updated 2024-02-19 21:06:26

Comment Faire En Sorte Qu'un Lien Markdown S'ouvre Dans Un Autre Onglet.


Read it in English

Veuillez noter que je ne suis en aucun cas un locuteur natif de français, ces traductions sont censées faire partie de mon processus d'apprentissage.

Table of contents

Parfois, il est important de ne pas interrompre le flux d'un lecteur en le redirigeant loin de votre document Markdown lorsqu'il clique sur un lien. Dans ce cas, de tels liens doivent s'ouvrir dans un nouvel onglet de leur navigateur. Malheureusement, le commonMark [↗] document, qui est une spécification de la syntaxe Markdown, ne décrit pas de moyen de mettre cela en œuvre.

Cela signifie que différents systèmes adoptent différentes structures de syntaxe ou façons de permettre cela.

URLs absolues vs relatives

La première chose que vous voudrez vérifier est si votre plateforme ouvre les URL absolues dans un nouvel onglet et les URL relatives dans le même onglet.

Par exemple, http://exemple.com/chemin-vers/quelque-part s'ouvrira dans un nouvel onglet, et /chemin-vers/quelque-part sans le domaine de base s'ouvrira dans le même onglet.

Tous les systèmes de markdown ne prennent pas en charge cela, mais beaucoup le font.

Utilisation d'une bibliothèque logicielle externe

01: ## Démo Markdown 02: 03: [Texte du bouton](https://eddymens.com) 04: 05: <script src='https://cdn.jsdelivr.net/gh/eddymens/markdown-external-link-script@v2.0.0/main.min.js'></script> 06:

Source [↗]

J'ai créé une bibliothèque logicielle simple qui ouvre les URL absolues dans un nouvel onglet.

Suivez les étapes suivantes pour le faire fonctionner :

  1. Importez la bibliothèque logicielle [↗] dans votre fichier Markdown.
  2. À partir de maintenant, tous les URL absolus (externes) tels que : https://eddymens.com/blog s'ouvriront dans un nouvel onglet, tandis que les URL relatifs tels que : /blog s'ouvriront dans le même onglet.

Votre analyseur Markdown doit autoriser les balises de script pour que cela fonctionne. Une façon de le savoir est de copier et d'ajouter le script ci-dessus et de vérifier si vos URL absolues (URL externes) s'ouvrent dans un nouvel onglet.

Le code source de cette bibliothèque logicielle se trouve sur GitHub [↗].

Utilisation des balises d'ancre

La plupart des analyseurs Markdown autoriseront le HTML à coexister avec le Markdown sans échapper le HTML. Cela signifie que si vous écrivez ou ajoutez du HTML dans votre Markdown, il s'affichera lorsqu'il sera finalement rendu. Cela vous permet d'utiliser la balise d'ancre HTML lorsque vous devez ajouter un lien externe au lieu de la syntaxe []() en Markdown. Vous ajoutez simplement l'attribut target="_blank" à votre balise d'ancre pour que les liens s'ouvrent dans un onglet de navigateur différent.

01: <a href="placeholder.com" target="_blank">Ouvre dans un nouvel onglet</a>

Le seul inconvénient est que votre document Markdown n'est plus uniquement du Markdown car il contient du HTML. Cela peut être un problème ou non selon votre cas d'utilisation.

Utilisation de l'élément de base

Une façon d'assurer que les liens de votre page s'ouvrent dans un nouvel onglet sans utiliser la balise a est d'ajouter l'extrait suivant à votre Markdown.

01: <base target="_blank">

Vous pouvez placer ceci en haut de la page Markdown. Cela ajoutera target="_blank" à chaque lien de votre page.

Attention, cela peut entraîner l'ouverture externe d'autres liens, tels que les liens de la barre de navigation.

Utilisation d'un service de redirection

Et si vous ne vouliez que certains liens s'ouvrent en externe ?

J'ai pensé à https://external.ink [↗]. Il vous suffit d'ajouter votre lien à l'URL et de le référencer dans votre Markdown, et il se charge du reste.

01: [Ouvre dans un nouvel onglet](https://external.ink?to=/placeholder.com)

Il est open source [↗], donc n'hésitez pas à le cloner et à exécuter votre copie si vous le souhaitez. Il est assez facile à héberger car il s'agit simplement de HTML, CSS et JavaScript.