Puis-je créer des liens avec 'target = “_ blank”' dans Markdown?

462

Existe-t-il un moyen de créer un lien dans Markdown qui s'ouvre dans une nouvelle fenêtre? Sinon, quelle syntaxe recommandez-vous pour ce faire. Je vais l'ajouter au compilateur de Markdown que j'utilise. Je pense que cela devrait être une option.

html  hyperlink  markdown  target  new-window 
— ma11hew28
source
Donc, comme indiqué dans les réponses, ce n'est pas une fonctionnalité de démarque. Si vous vouliez en faire un site par défaut à lier, David Morrow a la réponse . Ou si vous vouliez le faire en une seule fois, alors la réponse de Matchu dit que vous devez réellement l'écrire en HTML.
— JGallardo
— Serge Stroobandt
Votre question n'est pas spécifique sur ce que vous faites, mais certains moteurs ou navigateurs de démarque (vous ne savez pas lequel) reconnaissent quand le lien que vous créez pointe vers un autre domaine et les ouvrira dans un nouvel onglet. Pour moi, il y a des moments où il suffit de supprimer le sde https:pour obtenir les fonctionnalités que je veux.
— Josh Gust

Réponses:

379

En ce qui concerne la syntaxe Markdown, si vous voulez obtenir des informations détaillées, vous n'aurez qu'à utiliser HTML.

<a href="http://example.com/" target="_blank">Hello, world!</a>

La plupart des moteurs Markdown que j'ai vus autorisent le HTML ancien, juste pour des situations comme celle-ci où un système de balisage de texte générique ne le coupera pas. (Le moteur StackOverflow, par exemple.) Ils exécutent ensuite l'intégralité de la sortie via un filtre de liste blanche HTML, car même un document uniquement Markdown peut facilement contenir des attaques XSS. En tant que tel, si vous ou vos utilisateurs souhaitez créer des _blankliens, ils le peuvent probablement.

Si c'est une fonctionnalité que vous allez utiliser souvent, il peut être judicieux de créer votre propre syntaxe, mais ce n'est généralement pas une fonctionnalité vitale. Si je veux lancer ce lien dans une nouvelle fenêtre, je vais le cliquer-ctrl moi-même, merci.

— Matchu
source
19
Tu sais quoi? Je suis d'accord avec toi et Alex . J'ai décidé de ne pas utiliser _blankdu tout. C'est une meilleure expérience utilisateur pour garder les choses dans un seul navigateur. Ils peuvent simplement riposter ou cliquer sur la commande (utilisateur Mac ici :)), comme vous le dites.
— ma11hew28
1
J'ai exécuté javascript sur la page qui ajoute _blank à tous les liens en dehors de mon domaine. comme @alex a dans la réponse suivante
— David Silva Smith
3
Je proposerais (dans le souci d'être explicite et lisible en ligne) la syntaxe suivante: [Visit this page](http::/link.com(pour avoir l'idée d' ouverture .
— Augustin Riedinger
4
Cible simple = "_ blanc" peut être dangereux! Ajoutez également rel = "noopener" dans la balise! ( sites.google.com/site/bughunteruniversity/nonvuln/… )
— Max Vyaznikov
1
@MaxVyaznikov Intéressant. Pensez-vous qu'il serait plus sûr si les navigateurs fournissaient une fenêtre contextuelle au-dessus du bord pour la connexion? Séparez l'interface utilisateur de connexion pour les sites Web de l'interface utilisateur de connexion falsifiée et fausse créée par des pages Web "similaires". Il serait peut-être plus possible maintenant où cela était plus difficile dans le passé.
— 1,21 gigawatts
351

Kramdown le soutient. Il est compatible avec la syntaxe Markdown standard, mais possède également de nombreuses extensions. Vous l'utiliseriez comme ceci:

[link](url){:target="_blank"}
— farnoy
source
7
Cela ne semble pas fonctionner avec le moteur Markdown sur Mac :-(
— Netsi1964
49
Fonctionne très bien avec jekyll!
— bholagabbar
1
La syntaxe de kramdown : [nom du lien] (url_link) {: target = "_ blank"} peut être analysée en HTML à l'aide de l'éditeur en ligne de kramdown: http://trykramdown.herokuapp.com/ Je l'ai utilisé car j'en avais déjà pas mal références kramdown, et voulait éviter de les retaper.
— algoquant
4
Existe-t-il un moyen dans jekyll de définir cela comme valeur par défaut? J'aimerais que tous les liens de mes articles de blog s'ouvrent avectarget="_blank"
— ahirschberg
10
Ça ne marche pas. Il rend simplement le {: target = "_ blank"} sous forme de texte.
— Benny
113

Je ne pense pas qu'il existe une fonction de démarque.

Bien qu'il puisse y avoir d'autres options disponibles si vous souhaitez ouvrir automatiquement des liens qui pointent en dehors de votre propre site avec JavaScript. 

var links = document.links;

for (var i = 0, linksLength = links.length; i < linksLength; i++) {
   if (links[i].hostname != window.location.hostname) {
       links[i].target = '_blank';
   } 
}

jsFiddle .

Si vous utilisez jQuery, c'est un peu plus simple ...

$(document.links).filter(function() {
    return this.hostname != window.location.hostname;
}).attr('target', '_blank');

jsFiddle .

— alex
source
1
je suis d'accord avec vous mais à l'occasion que vous êtes dans un iframe, vous devez exploser hors du cadre avec le lien.
— David Morrow
2
Je trouve que la seule fois où je force des gens dans une nouvelle fenêtre, c'est quand je suis à mi-chemin d'une phrase reliant un endroit externe, et je veux fournir des sources pour mes commentaires sans interrompre le flux. Cet extrait js est idéal pour le but - merci, a voté :)
— tehwalrus
14
Je pense que cette citation de Jakob Nielson ne s'applique plus ici. Il se plaint d'ouvrir de nouvelles fenêtres, mais de nos jours target = "_ blank" s'ouvre à la place dans un nouvel onglet. Personnellement, je n'aime pas que les liens vers d'autres domaines ne s'ouvrent pas dans de nouveaux onglets.
— Alexander Rechsteiner
3
Aussi: parce que dire Jakob Nielsen says you shouldn't do thatest un terrible argument.
— Ola Tuvesson
2
Je vais ajouter ici que CECI est également préférable comme solution globale. Il garde votre Markdown propre, ce qui est le point de Markdown.
— Adam Michael Wood,
47

Avec Markdown-2.5.2, vous pouvez utiliser ceci:

[link](url){:target="_blank"}
— meduvigo
source
2
J'ai essayé ça et ça n'a pas marché pour moi. Utilisation avec django 1.6
— joel goldstick
5
Fonctionne avec Jekyll v2.4.0 (peut également fonctionner avec les versions antérieures)
— nicksuch
5
Il s'agit de kramdown (et comme Jekyll utilise kramdown, cela fonctionne avec Jekyll).
— z3ntu
1
Impossible de faire fonctionner cette syntaxe dans GitLab. Je ne sais pas quelle version de Markdown est actuellement utilisée.
— Rockin4Life33
Existe-t-il un moyen de définir ce paramètre par défaut, je n'ai donc pas à le spécifier pour chaque lien?
— Connel
8

Une solution globale consiste à mettre <base target="_blank"> dans l' <head>élément de votre page . Cela ajoute effectivement une cible par défaut à chaque élément d'ancrage. J'utilise le démarquage pour créer du contenu sur mon site Web basé sur Wordpress, et mon personnalisateur de thème me permettra d'injecter ce code dans le haut de chaque page. Si votre thème ne fait pas ça, il y a un plug-in

— aholub
source
8

J'utilise Grav CMS et cela fonctionne parfaitement:

Corps / contenu:
Some text[1]

Corps / référence:
[1]: http://somelink.com/?target=_blank

Assurez-vous simplement que l'attribut cible est passé en premier, s'il y a des attributs supplémentaires dans le lien, copiez / collez-les à la fin de l'URL de référence.

Fonctionne également comme lien direct:
[Go to this page](http://somelink.com/?target=_blank)

— Peter Danshov
source
Pour référence, voici le chapitre de documentation pertinent .
— domsson
7

Pour l'utilisation de démarque fantôme:

[Google](https://google.com" target="_blank)

Je l'ai trouvé ici: https://cmatskas.com/open-external-links-in-a-new-window-ghost/

— guya
source
1
j'aime votre solution. comme je l'ai essayé avec différentes configurations, il semble que cela ne fonctionne que dans la liaison en ligne . il existe peut-être un moyen de créer des liens avec des liens de référence . quelque chose comme: [open new window][1] \n [1]: (https://abc.xyz" target="_blank). peut-être que je me trompe quelque chose, ou ce n'est pas ment pour fonctionner de cette façon?
— MrIsaacs
7

Il n'est donc pas tout à fait vrai que vous ne pouvez pas ajouter d'attributs de lien à une URL Markdown. Pour ajouter des attributs, vérifiez avec l'analyseur de démarque sous-jacent utilisé et quelles sont leurs extensions.

En particulier, pandoca une extension à activer link_attributes, qui permet le balisage dans le lien. par exemple

[Hello, world!](http://example.com/){target="_blank"}
  • Pour ceux qui viennent de R (par exemple , en utilisant rmarkdown, bookdown, blogdownetc.), c'est la syntaxe que vous voulez.
  • Pour ceux qui n'utilisent pas R , vous devrez peut-être activer l'extension dans l'appel à pandocavec+link_attributes

Remarque: Ceci est différent kramdowndu support de l' analyseur, qui est l'une des réponses acceptées ci-dessus. En particulier, notez que kramdown diffère de pandoc car il nécessite deux points - :- au début des accolades - {}, par exemple

[link](http://example.com){:hreflang="de"}

En particulier:

# Pandoc
{ attribute1="value1" attribute2="value2"}

# Kramdown
{: attribute1="value1" attribute2="value2"}
 ^
 ^ Colon
— sans poil
source
Cela a fonctionné pour moi dans notre environnement de démarque personnalisé. Merci!
— klewis
6

Vous pouvez le faire via un code javascript natif comme ceci:

 
var pattern = /a href=/g;
var sanitizedMarkDownText = rawMarkDownText.replace(pattern,"a target='_blank' href=");

Code JSFiddle

— MrPenguin Pablo
source
6

Dans mon projet, je fais cela et cela fonctionne très bien:

[Link](https://example.org/ "title" target="_blank")

Lien

Mais tous les analyseurs ne vous permettent pas de le faire.

— user5036455
source
Fonctionne presque, mais même votre exemple s'affiche avec une URL encodée dans le titre attr, plutôt que sous forme de nouvelles attrs (affichez la source ou modifiez le nœud en html): <a href="https://example.org/" rel="nofollow" title="title&quot; target=&quot;_blank">Link</a>
— Graham P Heath
6

Il n'y a pas de moyen facile de le faire, et comme @alex l'a noté, vous devrez utiliser JavaScript. Sa réponse est la meilleure solution mais afin de l'optimiser, vous voudrez peut-être filtrer uniquement sur les liens post-contenu.

<script>
    var links = document.querySelectorAll( '.post-content a' );  
    for (var i = 0, length = links.length; i < length; i++) {  
        if (links[i].hostname != window.location.hostname) {
            links[i].target = '_blank';
        }
    }
</script>

Le code est compatible avec IE8 + et vous pouvez l'ajouter en bas de votre page. Notez que vous devrez remplacer le ".post-content a" par la classe que vous utilisez pour vos publications.

Comme vu ici: http://blog.hubii.com/target-_blank-for-links-on-ghost/

— midudev
source
0

J'ai rencontré ce problème lors de la tentative d'implémentation du démarquage à l'aide de PHP.

Étant donné que les liens générés par l'utilisateur créés avec markdown doivent s'ouvrir dans un nouvel onglet, mais les liens de site doivent rester dans l'onglet, j'ai modifié markdown pour ne générer que des liens qui s'ouvrent dans un nouvel onglet. Donc, tous les liens de la page ne sont pas liés, juste ceux qui utilisent le démarque.

Dans le démarquage, j'ai changé toute la sortie du lien pour être <a target='_blank' href="...">ce qui était assez facile en utilisant find / replace.

— user3167223
source
0

Je ne suis pas d'accord pour dire que c'est une meilleure expérience utilisateur de rester dans un onglet de navigateur. Si vous souhaitez que les internautes restent sur votre site ou reviennent pour terminer la lecture de cet article, envoyez-les dans un nouvel onglet.

En s'appuyant sur la réponse de @ davidmorrow, jetez ce javascript dans votre site et transformez simplement les liens externes en liens avec target = _blank:

    <script type="text/javascript" charset="utf-8">
      // Creating custom :external selector
      $.expr[':'].external = function(obj){
          return !obj.href.match(/^mailto\:/)
                  && (obj.hostname != location.hostname);
      };

      $(function(){
        // Add 'external' CSS class to all external links
        $('a:external').addClass('external');

        // turn target into target=_blank for elements w external class
        $(".external").attr('target','_blank');

      })

    </script>
— Danny
source
0

Pour réponse alex complétée (13 décembre 10)

Une cible d'injection plus intelligente pourrait être effectuée avec ce code:

/*
 * For all links in the current page...
 */
$(document.links).filter(function() {
    /*
     * ...keep them without `target` already setted...
     */
    return !this.target;
}).filter(function() {
    /*
     * ...and keep them are not on current domain...
     */
    return this.hostname !== window.location.hostname ||
        /*
         * ...or are not a web file (.pdf, .jpg, .png, .js, .mp4, etc.).
         */
        /\.(?!html?|php3?|aspx?)([a-z]{0,3}|[a-zt]{0,4})$/.test(this.pathname);
/*
 * For all link kept, add the `target="_blank"` attribute. 
 */
}).attr('target', '_blank');

Vous pouvez modifier les exceptions d'expression régulière en ajoutant plus d'extension dans la (?!html?|php3?|aspx?)construction de groupe (comprenez cette expression régulière ici: https://regex101.com/r/sE6gT9/3 ).

et pour une version sans jQuery, vérifiez le code ci-dessous:

var links = document.links;
for (var i = 0; i < links.length; i++) {
    if (!links[i].target) {
        if (
            links[i].hostname !== window.location.hostname || 
            /\.(?!html?)([a-z]{0,3}|[a-zt]{0,4})$/.test(links[i].pathname)
        ) {
            links[i].target = '_blank';
        } 
    }
}
— Bruno Lesieur
source
0

Automatisé pour les liens externes uniquement, en utilisant GNU sed & make

Si l'on souhaite le faire systématiquement pour tous les liens externes, CSS n'est pas une option . Cependant, on pourrait exécuter la sedcommande suivante une fois le (X) HTML créé à partir de Markdown:

sed -i 's|href="http|target="_blank" href="http|g' index.html

Cela peut être encore automatisé en ajoutant la sedcommande ci-dessus à a makefile. Pour plus de détails, consultez GNU makeou voyez comment je l'ai fait sur mon site Web .

— Serge Stroobandt
source
-3

Cela fonctionne pour moi: [Page Link] (votre URL ici "(target | _blank)")

— Jose Espin
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.