Posso criar links com 'target = “_ blank”' no Markdown?

462

Existe uma maneira de criar um link no Markdown que se abre em uma nova janela? Caso contrário, que sintaxe você recomenda fazer isso. Vou adicioná-lo ao compilador de descontos que eu uso. Eu acho que deveria ser uma opção.

html  hyperlink  markdown  target  new-window 
— ma11hew28
fonte
Portanto, como indicado nas respostas, não é um recurso na remarcação. Se você deseja tornar este site um padrão em todo o site, David Morrow tem a resposta . Ou, se você apenas quis fazer isso em uma instância, a resposta do Matchu diz que você deve realmente escrever isso em HTML.
— JGallardo
— Serge Stroobandt 10/06
Sua pergunta não é específica sobre o que você está fazendo, mas alguns mecanismos ou navegadores de descontos (sem saber qual) reconhecem quando o link que você está criando está apontando para um domínio diferente e os abre em uma nova guia. Para mim, há momentos em que remover o sda https:é suficiente para obter a funcionalidade desejada.
— Josh Gust

Respostas:

379

No que diz respeito à sintaxe do Markdown, se você quiser obter detalhes detalhados, precisará usar o HTML.

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

A maioria dos mecanismos de Markdown que eu vi permitem HTML antigo simples, apenas para situações como esta, em que um sistema genérico de marcação de texto simplesmente não funciona. (O mecanismo StackOverflow, por exemplo.) Eles executam toda a saída por meio de um filtro de lista de permissões HTML, independentemente, pois mesmo um documento somente para Markdown pode conter facilmente ataques XSS. Dessa forma, se você ou seus usuários quiserem criar _blanklinks, eles provavelmente ainda poderão.

Se esse é um recurso que você usará com frequência, pode fazer sentido criar sua própria sintaxe, mas geralmente não é um recurso vital. Se eu quiser iniciar esse link em uma nova janela, clicarei nele com a tecla Ctrl, obrigado.

— Matchu
fonte
19
Você sabe o que? Eu concordo com você e alex . Eu decidi não usar _blanknada. É uma experiência melhor para o usuário manter as coisas em um navegador. Eles podem simplesmente clicar ou pressionar a tecla Command (usuário do Mac aqui :)), como você diz.
— ma11hew28
1
Tenho o javascript executado na página que adiciona _blank a todos os links fora do meu domínio. como @alex tem na próxima resposta
— David Silva Smith
3
Eu sugeriria (no desejo de ser explícito e legível em linha) a seguinte sintaxe: [Visit this page](http::/link.com(para ter a idéia de abrir .
— Augustin Riedinger
4
Alvo simples = "_ blank" pode ser perigoso! Adicione também rel = "noopener" na tag! ( sites.google.com/site/bughunteruniversity/nonvuln/… )
— Max Vyaznikov 06/07/16
1
@MaxVyaznikov Interesting. Você acha que seria mais seguro se os navegadores fornecessem uma janela pop-up acima da borda para o login? Separe a interface do usuário de login dos sites da interface de usuário falsa e falsificada criada por páginas da Web "parecidas". Pode ser mais possível agora, onde era mais difícil no passado.
— 1,21 gigawatts
351

O Kramdown suporta isso. É compatível com a sintaxe padrão do Markdown, mas também possui muitas extensões. Você usaria assim:

[link](url){:target="_blank"}
— farnoy
fonte
7
Isso não parece trabalhar usando o motor Markdown no Mac :-(
— Netsi1964
49
Funciona muito bem com jekyll!
— bholagabbar
1
A sintaxe do kramdown : [nome do link] (url_link) {: target = "_ blank"} pode ser analisada em HTML usando o editor on-line do kramdown: http://trykramdown.herokuapp.com/ Eu o usei porque já tinha muitos referências do kramdown e queria evitar digitá-las novamente.
— Algo
4
Existe uma maneira no jekyll para definir isso como padrão? Gostaria que todos os links dos meus posts target="_blank"
— fossem
10
Isso não funciona. Apenas renderiza o {: target = "_ blank"} como texto.
— Benny
113

Eu não acho que exista um recurso de remarcação.

Embora possa haver outras opções disponíveis, se você deseja abrir links que apontam para fora do seu site automaticamente com 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 .

Se você estiver usando jQuery, é um pouco mais simples ...

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

jsFiddle .

— alex
fonte
1
Eu concordo com você, mas na ocasião em que você estiver em um iframe, precisará sair do quadro com o link.
— David Morrow
2
Acho que a única vez que forço as pessoas a entrar em uma nova janela é quando estou no meio de uma frase vinculando algum lugar externo e quero fornecer fontes para meus comentários sem interromper o fluxo. Este js trecho é ideal para a finalidade - graças, upvoted :)
— tehwalrus
14
Eu acho que essa citação de Jakob Nielson não se aplica mais aqui. Ele reclama da abertura de novas janelas, mas atualmente target = "_ blank" é aberto em uma nova guia. Pessoalmente, não gosto quando links para outros domínios não são abertos em novas guias.
— Alexander Rechsteiner
3
Também: porque dizer Jakob Nielsen says you shouldn't do thaté um argumento terrível.
— Ola Tuvesson
2
Vou acrescentar aqui que ISTO também é preferível como uma solução global. Ele mantém seu Markdown limpo, que é o ponto de Markdown.
— Adam Michael Wood
47

Com o Markdown-2.5.2, você pode usar o seguinte:

[link](url){:target="_blank"}
— meduvigo
fonte
2
Eu tentei isso e não funcionou para mim. Usando com django 1,6
— Joel Goldstick
5
Funciona com Jekyll v2.4.0 (trabalho poder com versões anteriores também)
— nicksuch
5
Este é o kramdown (e como o Jekyll usa o kramdown, ele funciona com o Jekyll).
— Z3ntu 26/11/2015
1
Não é possível que essa sintaxe funcione no GitLab. Não tenho certeza de qual versão do Markdown está atualmente em uso.
— precisa saber é o seguinte
Existe uma maneira de tornar isso o padrão para que eu não precise especificá-lo para todos os links?
— Connel
8

Uma solução global é colocar <base target="_blank"> no <head>elemento da sua página . Isso efetivamente adiciona um destino padrão a cada elemento âncora. Uso marcações para criar conteúdo no meu site baseado em Wordpress, e meu personalizador de temas me permite inserir esse código na parte superior de todas as páginas. Se o seu tema não fizer isso, há um plug-in

— aholub
fonte
8

Estou usando o Grav CMS e isso funciona perfeitamente:

Corpo / Conteúdo:
Some text[1]

Corpo / Referência:
[1]: http://somelink.com/?target=_blank

Apenas verifique se o atributo de destino é passado primeiro; se houver atributos adicionais no link, copie / cole-os no final do URL de referência.

Também funciona como link direto:
[Go to this page](http://somelink.com/?target=_blank)

— Peter Danshov
fonte
Para referência, aqui está o capítulo da documentação relevante .
— domsson
7

Para marcação fantasma, use:

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

Encontre-o aqui: https://cmatskas.com/open-external-links-in-a-new-window-ghost/

— guya
fonte
1
eu gosto da sua solução como eu tentei com configurações diferentes, parece que ele só funciona em links embutidos . talvez haja uma maneira de vincular com links de referência . algo como: [open new window][1] \n [1]: (https://abc.xyz" target="_blank). talvez eu confunda alguma coisa, ou isso não é mentir para trabalhar dessa maneira?
— MrIsaacs
7

Portanto, não é bem verdade que você não pode adicionar atributos de link a um URL Markdown. Para adicionar atributos, verifique com o analisador de redução subjacente que está sendo usado e quais são suas extensões.

Em particular, pandocpossui uma extensão para ativar link_attributes, que permite a marcação no link. por exemplo

[Hello, world!](http://example.com/){target="_blank"}
  • Para quem vem de R (por exemplo, usando rmarkdown, bookdown, blogdowne assim por diante), esta é a sintaxe que você deseja.
  • Para aqueles que não usam R , pode ser necessário ativar a extensão na chamada para pandoccom+link_attributes

Nota: Isso é diferente kramdowndo suporte do analisador, que é uma das respostas aceitas acima. Em particular, observe que o kramdown difere do pandoc, pois requer dois pontos - :- no início dos colchetes - {}, por exemplo

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

Em particular:

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

# Kramdown
{: attribute1="value1" attribute2="value2"}
 ^
 ^ Colon
— sem casaco
fonte
Isso funcionou para mim em nosso ambiente de descontos personalizado. Obrigado!
— klewis
6

Você pode fazer isso via código javascript nativo da seguinte forma:

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

Código JSFiddle

— MrPenguin Pablo
fonte
6

No meu projeto, estou fazendo isso e funciona bem:

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

Ligação

Mas nem todos os analisadores permitem que você faça isso.

— user5036455
fonte
Quase funciona, mas até mesmo o seu exemplo processa com url codificado no attr título, em vez de novas attrs (exibição da fonte ou editar o nó como html): <a href="https://example.org/" rel="nofollow" title="title&quot; target=&quot;_blank">Link</a>
— Graham P Heath
6

Não há maneira fácil de fazer isso, e como a @alex observou, você precisará usar o JavaScript. Sua resposta é a melhor solução, mas para otimizá-la, convém filtrar apenas os links de pós-conteúdo.

<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>

O código é compatível com o IE8 + e você pode adicioná-lo na parte inferior da sua página. Observe que você precisará alterar o ".post-content a" para a classe que você está usando para suas postagens.

Como visto aqui: http://blog.hubii.com/target-_blank-for-links-on-ghost/

— midudev
fonte
0

Corri para esse problema ao tentar implementar markdown usando PHP.

Como o usuário gerou links criados com remarcação precisa abrir em uma nova guia, mas os links do site precisam permanecer na guia, alterei a remarcação para gerar apenas links que abrem em uma nova guia. Portanto, nem todos os links da página são vinculados, apenas os que usam remarcações.

Na remarcação, mudei toda a saída do link para <a target='_blank' href="...">que fosse fácil o suficiente usando localizar / substituir.

— user3167223
fonte
0

Não concordo que seja uma experiência melhor para o usuário permanecer em uma guia do navegador. Se você deseja que as pessoas permaneçam no seu site ou voltem para terminar de ler esse artigo, envie-as em uma nova guia.

Com base na resposta de @ davidmorrow, jogue este javascript no seu site e transforme apenas links externos em links com 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
fonte
0

Para completar, alex respondeu (13 de dez '10)

Um destino de injeção mais inteligente pode ser feito com este código:

/*
 * 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');

Você pode alterar as exceções do regexp adicionando mais extensões na (?!html?|php3?|aspx?)construção do grupo (entenda esse regexp aqui: https://regex101.com/r/sE6gT9/3 ).

e para uma versão sem jQuery, verifique o código abaixo:

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
fonte
0

Automatizado apenas para links externos, usando GNU sed & make

Se alguém quiser fazer isso sistematicamente para todos os links externos, CSS não é uma opção . No entanto, pode-se executar o seguinte sedcomando depois que o HTML (X) for criado a partir do Markdown:

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

Isso pode ser automatizado ainda mais, adicionando o sedcomando acima a makefile. Para detalhes, consulte GNU makeou veja como eu fiz isso no meu site .

— Serge Stroobandt
fonte
-3

Isso funciona para mim: [Link da página] (seu URL aqui "(target | _blank)")

— Jose Espin
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.