web-dev-qa-db-fra.com

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

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

htmlhyperlinkmarkdowntargetnew-window
373
ma11hew28

En ce qui concerne la syntaxe Markdown, si vous souhaitez obtenir ces détails, vous devrez simplement utiliser HTML.

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

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

Si vous utilisez souvent cette fonctionnalité, il peut être judicieux de créer votre propre syntaxe, mais il ne s'agit généralement pas d'une fonctionnalité essentielle. Si je veux lancer ce lien dans une nouvelle fenêtre, je le ferai moi-même par Ctrl-clic, merci.

310
Matchu

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

[link](url){:target="_blank"}
302
farnoy

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

Bien que d'autres options soient disponibles, vous pouvez ouvrir des liens pointant automatiquement hors 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 .

103
alex

Avec Markdown-2.5.2, vous pouvez utiliser ceci:

[link](url){:target="_blank"}
43
meduvigo

Dans mon projet, je le fais et cela fonctionne bien:

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

Lien

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

6
user5036455

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

6
aholub

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

6
MrPenguin Pablo

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-les/collez-les à la fin de l'URL de référence.

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

6
Peter Danshov

Pour utiliser la 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/

6
guya

Il n'y a pas de moyen facile de le faire, et comme @alex a noté que vous deviez utiliser JavaScript. Sa réponse est la meilleure solution, mais pour l’optimiser, vous voudrez peut-être ne filtrer que 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 au bas de votre page. Notez que vous devrez remplacer ".post-content a" par la classe que vous utilisez pour vos publications.

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

4
midudev

Ainsi, il n'est 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émarques sous-jacent utilisé et quelles sont leurs extensions.

En particulier, pandoc a une extension permettant d'activer link_attributes , qui permet le marquage dans le lien. par exemple.

_[Hello, world!](http://example.com/){target="_blank"}
_
  • Pour ceux qui viennent de R (par exemple, en utilisant rmarkdown, bookdown, blogdown et ainsi de suite), il s'agit de la syntaxe souhaitée.
  • Pour ceux qui n'utilisent pas R, vous devrez peut-être activer l'extension dans l'appel à pandoc avec _+link_attributes_

Remarque: Ceci est différent du support de kramdown , qui fait partie des réponses acceptées ci-dessus. Notez en particulier que kramdown diffère de pandoc dans la mesure où il nécessite deux points - _:_ - au début des accolades - _{}_, par ex.

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

En particulier:

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

# Kramdown
{: attribute1="value1" attribute2="value2"}
 ^
 ^ Colon
_
3
coatless

Cela fonctionne pour moi: [Lien de la page] (votre URL ici "(cible | _blank)")

0
Jose Espin

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

Si on souhaite le faire systématiquement pour tous les liens externes, CSS n’est pas une option . Cependant, vous pouvez exécuter la commande suivante sed une fois que le (X) HTML a été créé à partir de Markdown:

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

Cela peut être automatisé davantage en ajoutant la commande sed ci-dessus à un makefile. Pour plus de détails, voir GNU make ou voyez comment j'ai fait cela sur mon site Web .

0
Serge Stroobandt

Je ne pense pas que le fait de rester dans un onglet de navigateur constitue une meilleure expérience utilisateur. Si vous voulez que les gens restent sur votre site ou reviennent pour finir de lire cet article, envoyez-les dans un nouvel onglet.

En vous appuyant sur la réponse de @ davidmorrow, jetez ce code javascript sur 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>
0
Danny

Alex a répondu (13 déc '10)

Une cible d'injection plus intelligente pourrait être réalisé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 rationnelle en ajoutant d'autres extensions dans la construction de groupe (?!html?|php3?|aspx?) (comprenez cette expression rationnelle ici: https://regex101.com/r/sE6gT9/ ).

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';
        } 
    }
}
0
Bruno Lesieur

Vous pouvez ajouter n’importe quel attribut en utilisant {[attr] = "[prop]"}

Par exemple, [Google] ( http://www.google.com ) {target = "_blank"}

0
leonardli

J'ai rencontré ce problème lorsque j'ai essayé d'implémenter le 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 que les liens de sites doivent rester dans l'onglet, j'ai modifié markdown pour ne générer que des liens qui s'ouvrent dans un nouvel onglet. Ainsi, tous les liens de la page ne sont pas liés, mais uniquement ceux qui utilisent le démarquage.

Dans markdown, j'ai changé toute la sortie du lien en <a target='_blank' href="...">, ce qui était assez facile avec find/replace.

0
user3167223