¿Puedo crear enlaces con 'target = “_ blank”' en Markdown?

462

¿Hay alguna forma de crear un enlace en Markdown que se abra en una nueva ventana? Si no es así, ¿qué sintaxis recomienda hacer? Lo agregaré al compilador de descuento que uso. Creo que debería ser una opción.

html hyperlink markdown target new-window ma11hew28
fuente
Entonces, como se señala en las respuestas, no es una característica en Markdown. Si desea hacer que este sea un sitio predeterminado para vincular, David Morrow tiene la respuesta . O si solo quería hacerlo en una instancia, la respuesta de Matchu dice que en realidad debe escribir eso en HTML.
JGallardo
posible duplicado de Markdown abre un nuevo enlace de ventana
Serge Stroobandt
Su pregunta no es específica sobre lo que está haciendo, pero algunos motores o navegadores de descuento (no estoy seguro de cuál) reconocen cuándo el enlace que está creando apunta a un dominio diferente y los abrirá en una nueva pestaña. Para mí, hay momentos en que eliminar el sdel https:es suficiente para obtener la funcionalidad que quiero.
Josh Gust

Respuestas:

379

En lo que respecta a la sintaxis de Markdown, si desea obtener esa información detallada, solo tendrá que usar HTML.

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

La mayoría de los motores de Markdown que he visto permiten HTML simple y antiguo, solo para situaciones como esta en las que un sistema de marcado de texto genérico simplemente no lo corta. (El motor StackOverflow, por ejemplo). Luego ejecutan toda la salida a través de un filtro de lista blanca HTML, ya que incluso un documento de Markdown puede contener fácilmente ataques XSS. Como tal, si usted o sus usuarios desean crear _blankenlaces, entonces probablemente aún puedan hacerlo .

Si esa es una característica que va a utilizar con frecuencia, podría tener sentido crear su propia sintaxis, pero generalmente no es una característica vital. Si quiero iniciar ese enlace en una nueva ventana, lo presionaré con la tecla Ctrl, gracias.

Matchu
fuente
19
Ya sabes que? Estoy de acuerdo contigo y alex . Decidí no usarlo _blanken absoluto. Es una mejor experiencia de usuario mantener las cosas en un navegador. Simplemente pueden responder o hacer clic en el comando (usuario de Mac aquí :)), como usted dice.
ma11hew28
1
Tengo javascript ejecutado en la página que agrega _blank a todos los enlaces fuera de mi dominio. como @alex tiene en la próxima respuesta
David Silva Smith
3
Sugeriría (en el deseo de ser explícito y legible en línea) la siguiente sintaxis: [Visit this page](http::/link.com(para tener la idea de abrir .
Augustin Riedinger
44
¡Target simple = "_ blank" puede ser peligroso! ¡Agregue también rel = "noopener" en la etiqueta! ( sites.google.com/site/bughunteruniversity/nonvuln/… )
Max Vyaznikov
1
@MaxVyaznikov Interesante. ¿Crees que sería más seguro si los navegadores proporcionaran una ventana emergente por encima del borde para iniciar sesión? Separe la IU de inicio de sesión para sitios web de la IU de inicio de sesión falsa y falsa creada por páginas web "parecidas". Podría ser más posible ahora donde era más difícil en el pasado.
1.21 gigavatios
351

Kramdown lo apoya. Es compatible con la sintaxis estándar de Markdown, pero también tiene muchas extensiones. Lo usarías así:

[link](url){:target="_blank"}
farnoy
fuente
77
Esto no parece funcionar usando el motor Markdown en Mac :-(
Netsi1964
49
Funciona muy bien con jekyll!
bholagabbar
1
La sintaxis de kramdown : [nombre del enlace] (url_link) {: target = "_ blank"} se puede analizar en HTML usando el editor en línea de kramdown: http://trykramdown.herokuapp.com/ Lo usé porque ya tenía bastantes referencias de kramdown, y quería evitar volver a escribirlas.
algoquant
44
¿Hay alguna manera en jekyll para establecer esto como predeterminado? Me gustaría que todos los enlaces en mi blog para abrir contarget="_blank"
ahirschberg
10
No funciona Simplemente representa el {: target = "_ blank"} como texto.
Benny
113

No creo que haya una función de rebaja.

Aunque puede haber otras opciones disponibles si desea abrir enlaces que apuntan fuera de su propio sitio automáticamente con 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 está utilizando jQuery, es un poco más simple ...

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

jsFiddle .

alex
fuente
1
Estoy de acuerdo con usted, pero en el caso de que esté en un iframe, debe salir del marco con el enlace.
David Morrow
2
Creo que el único momento en que forzo a las personas a entrar en una nueva ventana es cuando estoy a mitad de una oración que enlaza en algún lugar externo, y quiero proporcionar fuentes para mis comentarios sin interrumpir el flujo. Este fragmento de js es ideal para este propósito - gracias, votado :)
tehwalrus
14
Creo que la cita de Jakob Nielson ya no se aplica aquí. Se queja de abrir nuevas ventanas, pero hoy en día target = "_ blank" se abre en una nueva pestaña. Personalmente no me gusta cuando los enlaces a otros dominios no se abren en nuevas pestañas.
Alexander Rechsteiner
3
Además: porque decir Jakob Nielsen says you shouldn't do thates un argumento terrible.
Ola Tuvesson
2
Agregaré aquí que ESTO también es preferible como solución global. Mantiene su Markdown limpio, que es el punto de Markdown.
Adam Michael Wood
47

Con Markdown-2.5.2, puede usar esto:

[link](url){:target="_blank"}
meduvigo
fuente
2
Intenté esto y no funcionó para mí. Uso con django 1.6
joel goldstick
55
Funciona con Jekyll v2.4.0 (también podría funcionar con versiones anteriores)
nicksuch
55
Esto es kramdown (y como Jekyll usa kramdown, funciona con Jekyll).
z3ntu
1
Parece que esta sintaxis no funciona en GitLab. No estoy seguro de qué versión de Markdown está actualmente en uso.
Rockin4Life33
¿Hay alguna manera de hacer que esto sea el predeterminado para que no tenga que especificarlo para cada enlace?
Connel
8

Una solución global es poner <base target="_blank"> en el <head>elemento de su página . Eso efectivamente agrega un objetivo predeterminado a cada elemento de anclaje. Utilizo Markdown para crear contenido en mi sitio web basado en Wordpress, y mi personalizador de temas me permitirá inyectar ese código en la parte superior de cada página. Si su tema no hace eso, hay un complemento

aholub
fuente
8

Estoy usando Grav CMS y esto funciona perfectamente:

Cuerpo / Contenido:
Some text[1]

Cuerpo / Referencia:
[1]: http://somelink.com/?target=_blank

Solo asegúrese de que el atributo de destino se pase primero, si hay atributos adicionales en el enlace, cópielos / péguelos al final de la URL de referencia.

También funciona como enlace directo:
[Go to this page](http://somelink.com/?target=_blank)

Peter Danshov
fuente
Como referencia, aquí está el capítulo de documentación relevante .
domsson
7

Para el uso de rebajas fantasma:

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

Lo encontré aquí: https://cmatskas.com/open-external-links-in-a-new-window-ghost/

guya
fuente
1
Me gusta tu solución. Como lo he probado con diferentes configuraciones, parece que solo funciona en enlaces en línea . tal vez hay una manera de vincular con enlaces de referencia . algo así como: [open new window][1] \n [1]: (https://abc.xyz" target="_blank). ¿Tal vez confundo algo, o esto no funciona para que funcione de esa manera?
MrIsaacs
7

Por lo tanto, no es del todo cierto que no pueda agregar atributos de enlace a una URL de Markdown. Para agregar atributos, verifique con el analizador de rebajas subyacente que se está utilizando y cuáles son sus extensiones.

En particular, pandoctiene una extensión para habilitar link_attributes, que permite el marcado en el enlace. p.ej

[Hello, world!](http://example.com/){target="_blank"}
  • Para los que vienen de R (por ejemplo, utilizando rmarkdown, bookdown, blogdownetc.), esta es la sintaxis que desee.
  • Para aquellos que no usan R , es posible que deba habilitar la extensión en la llamada pandoccon+link_attributes

Nota: Esto es diferente al kramdownsoporte del analizador, que es una de las respuestas aceptadas anteriormente. En particular, tenga en cuenta que kramdown difiere de pandoc, ya que requiere dos puntos :, al comienzo de las llaves {}, p. Ej.

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

En particular:

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

# Kramdown
{: attribute1="value1" attribute2="value2"}
 ^
 ^ Colon
sin abrigo
fuente
Esto funcionó para mí en nuestro entorno de rebajas personalizado. ¡Gracias!
klewis
6

Puede hacer esto a través del código JavaScript nativo de la siguiente manera:

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

Código JSFiddle

MrPenguin Pablo
fuente
6

En mi proyecto estoy haciendo esto y funciona bien:

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

Enlace

Pero no todos los analizadores te permiten hacer eso.

usuario5036455
fuente
Casi funciona, pero incluso su ejemplo se representa con una URL codificada en el atributo del título, en lugar de como nuevos atributos (ver fuente o editar el nodo como html): <a href="https://example.org/" rel="nofollow" title="title&quot; target=&quot;_blank">Link</a>
Graham P Heath
6

No hay una manera fácil de hacerlo, y como @alex ha notado, necesitará usar JavaScript. Su respuesta es la mejor solución, pero para optimizarla, es posible que desee filtrar solo a los enlaces posteriores al contenido.

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

El código es compatible con IE8 + y puede agregarlo al final de su página. Tenga en cuenta que deberá cambiar el ".post-content a" a la clase que está utilizando para sus publicaciones.

Como se ve aquí: http://blog.hubii.com/target-_blank-for-links-on-ghost/

midudev
fuente
0

Me encontré con este problema al intentar implementar Markdown usando PHP.

Como los enlaces generados por el usuario creados con Markdown deben abrirse en una nueva pestaña, pero los enlaces del sitio deben permanecer en la pestaña, cambié Markdown para generar solo enlaces que se abren en una nueva pestaña. Entonces, no todos los enlaces en la página enlazan, solo los que usan markdown.

En markdown cambié toda la salida del enlace para <a target='_blank' href="...">que fuera lo suficientemente fácil usando buscar / reemplazar.

usuario3167223
fuente
0

No estoy de acuerdo con que sea una mejor experiencia para el usuario permanecer dentro de una pestaña del navegador. Si desea que las personas permanezcan en su sitio o vuelvan a terminar de leer ese artículo, envíelos en una nueva pestaña.

Basándose en la respuesta de @ davidmorrow, agregue este javascript a su sitio y convierta solo enlaces externos en enlaces con 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
fuente
0

Puede agregar cualquier atributo usando {[attr] = "[prop]"}

Por ejemplo [Google] ( http://www.google.com ) {target = "_ blank"}

leonardli
fuente
0

Por completo Alex respondió (Dec 13 '10)

Se podría hacer un objetivo de inyección más inteligente con 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');

Puede cambiar las excepciones regexp agregando más extensión en la (?!html?|php3?|aspx?)construcción de grupo (entienda esta expresión regular aquí: https://regex101.com/r/sE6gT9/3 ).

y para una versión sin jQuery, verifique el código a continuación:

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

Automatizado solo para enlaces externos, utilizando GNU sed & make

Si a uno le gustaría hacer esto sistemáticamente para todos los enlaces externos, CSS no es una opción . Sin embargo, uno podría ejecutar el siguiente sedcomando una vez que se haya creado el (X) HTML desde Markdown:

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

Esto se puede automatizar aún más agregando el sedcomando anterior a a makefile. Para más detalles, vea GNU makeo vea cómo lo hice en mi sitio web .

Serge Stroobandt
fuente
-3

Esto funciona para mí: [Enlace de página] (su URL aquí "(target | _blank)")

Jose Espin
fuente