Kann ich in Markdown Links mit 'target = "_ blank"' erstellen?

461

Gibt es eine Möglichkeit, in Markdown einen Link zu erstellen, der in einem neuen Fenster geöffnet wird? Wenn nicht, welche Syntax empfehlen Sie dazu? Ich werde es dem von mir verwendeten Markdown-Compiler hinzufügen. Ich denke, es sollte eine Option sein.

html  hyperlink  markdown  target  new-window 
— ma11hew28
quelle
Wie in den Antworten ausgeführt, handelt es sich also nicht um eine Funktion beim Abschriften. Wenn Sie dies zu einer Standard-Sitewide für die Verknüpfung machen möchten, hat David Morrow die Antwort . Oder wenn Sie es nur in einer Instanz tun wollten, dann sagt Matchus Antwort , dass Sie das tatsächlich in HTML schreiben müssen.
— JGallardo
Mögliches Duplikat von Markdown Öffne einen neuen Fensterlink
— Serge Stroobandt
Ihre Frage ist nicht spezifisch, was Sie tun, aber einige Markdown-Engines oder Browser (nicht sicher, welche) erkennen, wenn der von Ihnen erstellte Link auf eine andere Domain verweist, und öffnen diese in einem neuen Tab. Für mich gibt es Zeiten, in denen das Entfernen saus dem https:ausreicht, um die gewünschte Funktionalität zu erhalten.
— Josh Gust

Antworten:

378

In Bezug auf die Markdown-Syntax müssen Sie nur HTML verwenden, um diese Details zu erhalten.

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

Die meisten Markdown-Engines, die ich gesehen habe, erlauben einfaches altes HTML, nur für Situationen wie diese, in denen ein generisches Text-Markup-System es einfach nicht schneidet. (Zum Beispiel die StackOverflow-Engine.) Anschließend wird die gesamte Ausgabe unabhängig davon über einen HTML-Whitelist-Filter ausgeführt, da selbst ein Nur-Markdown-Dokument problemlos XSS-Angriffe enthalten kann. Wenn Sie oder Ihre Benutzer _blankLinks erstellen möchten , können sie dies wahrscheinlich immer noch.

Wenn dies eine Funktion ist, die Sie häufig verwenden werden, ist es möglicherweise sinnvoll, eine eigene Syntax zu erstellen, diese ist jedoch im Allgemeinen keine wichtige Funktion. Wenn ich diesen Link in einem neuen Fenster starten möchte, klicke ich selbst bei gedrückter Strg-Taste darauf, danke.

— Matchu
quelle
19
Weißt du was? Ich stimme dir und Alex zu . Ich habe beschlossen, überhaupt nicht zu verwenden _blank. Es ist eine bessere Benutzererfahrung, Dinge in einem Browser zu behalten. Sie können einfach zurückschlagen oder mit der Befehlstaste klicken (Mac-Benutzer hier :)), wie Sie sagen.
— ma11hew28
1
Ich habe Javascript auf der Seite ausgeführt, die allen Links außerhalb meiner Domain _blank hinzufügt. wie @alex in der nächsten Antwort hat
— David Silva Smith
3
Ich würde (in dem Wunsch, explizit und inline lesbar zu sein) die folgende Syntax vorschlagen: [Visit this page](http::/link.com(um die Idee des Öffnens zu bekommen .
— Augustin Riedinger
4
Einfaches Ziel = "_ leer" kann gefährlich sein! Füge auch rel = "noopener" in das Tag ein! ( sites.google.com/site/bughunteruniversity/nonvuln/… )
— Max Vyaznikov
1
@ MaxVyaznikov Interessant. Denken Sie, es wäre sicherer, wenn Browser ein Popup-Fenster über dem Rand für die Anmeldung bereitstellen würden? Trennen Sie die Anmelde-Benutzeroberfläche für Websites von gefälschten und gefälschten Anmelde-Benutzeroberflächen, die von "Lookalike" -Webseiten erstellt wurden. Es könnte jetzt möglich sein, wo es in der Vergangenheit schwieriger war.
— 1,21 Gigawatt
350

Kramdown unterstützt es. Es ist mit der Standard-Markdown-Syntax kompatibel, hat aber auch viele Erweiterungen. Sie würden es so verwenden:

[link](url){:target="_blank"}
— Farnoy
quelle
7
Dies scheint nicht mit der Markdown-Engine auf dem Mac zu funktionieren :-(
— Netsi1964
48
Funktioniert hervorragend mit Jekyll!
— Bholagabbar
1
Die kramdown- Syntax: [link name] (url_link) {: target = "_ blank"} kann mit dem kramdown-Online-Editor in HTML analysiert werden: http://trykramdown.herokuapp.com/ Ich habe sie verwendet, weil ich bereits einige hatte kramdown verweist und wollte vermeiden, sie erneut einzugeben.
— Algoquant
4
Gibt es eine Möglichkeit in Jekyll, dies als Standard festzulegen? Ich möchte, dass alle Links in meinen Blog-Posts mittarget="_blank"
— ahirschberg
10
Es funktioniert nicht. Es wird nur das {: target = "_ blank"} als Text gerendert.
— Benny
113

Ich glaube nicht, dass es eine Abschriftenfunktion gibt.

Möglicherweise sind jedoch andere Optionen verfügbar, wenn Sie Links, die außerhalb Ihrer eigenen Site verweisen, automatisch mit JavaScript öffnen möchten. 

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 .

Wenn Sie jQuery verwenden, ist es ein bisschen einfacher ...

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

jsFiddle .

— Alex
quelle
1
Ich stimme Ihnen zu, aber wenn Sie sich in einem Iframe befinden, müssen Sie mit dem Link aus dem Frame sprengen.
— David Morrow
2
Ich finde, das einzige Mal, dass ich Leute in ein neues Fenster zwinge, ist, wenn ich mich in der Mitte eines Satzes befinde, der irgendwo extern verlinkt, und ich möchte Quellen für meine Kommentare bereitstellen, ohne den Fluss zu unterbrechen. Dieses js-Snippet ist ideal für diesen Zweck - danke, positiv bewertet :)
— tehwalrus
14
Ich denke, das Zitat von Jakob Nielson trifft hier nicht mehr zu. Er beschwert sich über das Öffnen neuer Fenster, aber heutzutage wird target = "_ blank" stattdessen in einem neuen Tab geöffnet. Ich persönlich mag es nicht, wenn Links zu anderen Domains nicht in neuen Registerkarten geöffnet werden.
— Alexander Rechsteiner
3
Auch: weil das Sagen Jakob Nielsen says you shouldn't do thatein schreckliches Argument ist.
— Ola Tuvesson
2
Ich werde hier hinzufügen, dass DIESES auch als globale Lösung vorzuziehen ist. Es hält Ihren Markdown sauber, worum es bei Markdown geht.
— Adam Michael Wood
47

Mit Markdown-2.5.2 können Sie Folgendes verwenden:

[link](url){:target="_blank"}
— Meduvigo
quelle
2
Ich habe es versucht und es hat bei mir nicht funktioniert. Verwenden mit Django 1.6
— Joel Goldstick
5
Funktioniert mit Jekyll v2.4.0 (funktioniert möglicherweise auch mit früheren Versionen)
— Nicksuch
5
Dies ist kramdown (und da Jekyll kramdown verwendet, funktioniert es mit Jekyll).
— z3ntu
1
Diese Syntax scheint in GitLab nicht zum Laufen zu kommen. Ich bin nicht sicher, welche Version von Markdown derzeit verwendet wird.
— Rockin4Life33
Gibt es eine Möglichkeit, dies als Standard festzulegen, damit ich es nicht für jeden Link angeben muss?
— Connel
8

Eine globale Lösung besteht darin, sie <base target="_blank"> in das <head>Element Ihrer Seite einzufügen. Dadurch wird jedem Ankerelement effektiv ein Standardziel hinzugefügt. Ich verwende Markdown, um Inhalte auf meiner Wordpress-basierten Website zu erstellen, und mit meinem Theme-Customizer kann ich diesen Code oben auf jeder Seite einfügen. Wenn Ihr Thema das nicht tut, gibt es ein Plug-In

— Aholub
quelle
8

Ich benutze Grav CMS und das funktioniert perfekt:

Körper / Inhalt:
Some text[1]

Körper / Referenz:
[1]: http://somelink.com/?target=_blank

Stellen Sie einfach sicher, dass das Zielattribut zuerst übergeben wird. Wenn der Link zusätzliche Attribute enthält, kopieren Sie diese und fügen Sie sie am Ende der Referenz-URL ein.

Arbeiten Sie auch als direkter Link:
[Go to this page](http://somelink.com/?target=_blank)

— Peter Danshov
quelle
Als Referenz finden Sie hier das entsprechende Dokumentationskapitel .
— Domsson
7

Verwenden Sie für Ghost Markdown:

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

Fand es hier: https://cmatskas.com/open-external-links-in-a-new-window-ghost/

— Guya
quelle
1
Ich mag deine Lösung. Da ich es mit verschiedenen Konfigurationen ausprobiert habe, scheint es, dass es nur bei Inline-Verknüpfungen funktioniert . Vielleicht gibt es eine Möglichkeit, mit Referenzlinks zu verknüpfen . so etwas wie : [open new window][1] \n [1]: (https://abc.xyz" target="_blank). Vielleicht verwechsle ich etwas, oder das soll nicht so funktionieren?
— MrIsaacs
7

Es ist also nicht ganz richtig, dass Sie einer Markdown-URL keine Linkattribute hinzufügen können. Überprüfen Sie zum Hinzufügen von Attributen den verwendeten zugrunde liegenden Markdown-Parser und dessen Erweiterungen.

Insbesondere pandocmuss eine Erweiterung aktiviert werden link_attributes, die ein Markup im Link ermöglicht. z.B

[Hello, world!](http://example.com/){target="_blank"}
  • Für diejenigen, die aus R kommen (zB mitrmarkdown , bookdown,blogdown und so weiter), das ist die Syntax , die Sie wollen.
  • Für diejenigen, die R nicht verwenden , müssen Sie möglicherweise die Nebenstelle im Aufruf von aktivierenpandoc mit+link_attributes

Hinweis: Dies unterscheidet sich von der kramdownUnterstützung des Parsers, die eine der oben akzeptierten Antworten ist. Beachten Sie insbesondere, dass sich kramdown von pandoc unterscheidet, da ein Doppelpunkt erforderlich ist - :- am Anfang der geschweiften Klammern - {}z

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

Bestimmtes:

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

# Kramdown
{: attribute1="value1" attribute2="value2"}
 ^
 ^ Colon
— ohne Mantel
quelle
Dies funktionierte für mich in unserer benutzerdefinierten Markdown-Umgebung. Vielen Dank!
— Klewis
6

Sie können dies über nativen Javascript-Code wie folgt tun:

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

JSFiddle-Code

— MrPenguin Pablo
quelle
6

In meinem Projekt mache ich das und es funktioniert gut:

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

Verknüpfung

Aber nicht alle Parser lassen Sie das tun.

— user5036455
quelle
Funktioniert fast, aber selbst Ihr Beispiel wird mit einer URL gerendert, die im Titel attr codiert ist, und nicht als neue attrs (Quelle anzeigen oder Knoten als HTML bearbeiten): <a href="https://example.org/" rel="nofollow" title="title&quot; target=&quot;_blank">Link</a>
— Graham P Heath
6

Es gibt keine einfache Möglichkeit, dies zu tun, und wie @alex bemerkt hat, müssen Sie JavaScript verwenden. Seine Antwort ist die beste Lösung, aber um sie zu optimieren, möchten Sie möglicherweise nur nach den Links nach dem Inhalt filtern.

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

Der Code ist mit IE8 + kompatibel und kann am Ende Ihrer Seite hinzugefügt werden. Beachten Sie, dass Sie den ".post-content a" in die Klasse ändern müssen, die Sie für Ihre Posts verwenden.

Wie hier zu sehen: http://blog.hubii.com/target-_blank-for-links-on-ghost/

— midudev
quelle
0

Ich bin auf dieses Problem gestoßen, als ich versucht habe, Markdown mit PHP zu implementieren.

Da die vom Benutzer generierten Links, die mit Markdown erstellt wurden, in einem neuen Tab geöffnet werden müssen, Site-Links jedoch in einem Tab bleiben müssen, habe ich Markdown geändert, um nur Links zu generieren, die in einem neuen Tab geöffnet werden. Es werden also nicht alle Links auf der Seite verlinkt, sondern nur diejenigen, die Markdown verwenden.

In Markdown habe ich die gesamte Linkausgabe so geändert, dass sie <a target='_blank' href="...">mit find / replace einfach genug war.

— user3167223
quelle
0

Ich bin nicht der Meinung, dass es eine bessere Benutzererfahrung ist, in einem Browser-Tab zu bleiben. Wenn Sie möchten, dass Personen auf Ihrer Website bleiben oder zum Lesen dieses Artikels zurückkehren, senden Sie sie in einem neuen Tab ab.

Aufbauend auf der Antwort von @ davidmorrow werfen Sie dieses Javascript in Ihre Site und verwandeln Sie nur externe Links in Links mit 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
quelle
0

Für abgeschlossene Alex beantwortet (13. Dezember 10)

Mit diesem Code könnte ein intelligenteres Injektionsziel erreicht werden:

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

Sie können die Regexp-Ausnahmen ändern, indem Sie dem Gruppenkonstrukt eine weitere Erweiterung hinzufügen (?!html?|php3?|aspx?)(verstehen Sie diesen Regexp hier: https://regex101.com/r/sE6gT9/3 ).

und für eine Version ohne jQuery überprüfen Sie den folgenden Code:

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

Automatisiert nur für externe Links mit GNU sed & make

Wenn man dies systematisch für alle externen Links tun möchte, ist CSS keine Option . Man könnte jedoch den folgenden sedBefehl ausführen, sobald der (X) HTML-Code aus Markdown erstellt wurde:

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

Dies kann weiter automatisiert werden, indem der obige sedBefehl zu a hinzugefügt wird makefile. Weitere Einzelheiten finden Sie GNU makeoder sehen , wie ich das getan habe auf meiner Website .

— Serge Stroobandt
quelle
-3

Das funktioniert bei mir: [Page Link] (Ihre URL hier "(target | _blank)")

— Jose Espin
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.