webentwicklung-frage-antwort-db.com.de

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

Gibt es eine Möglichkeit, einen Link in Markdown 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.

htmlhyperlinkmarkdowntargetnew-window
373
ma11hew28

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 über einen HTML-Whitelist-Filter ausgeführt, unabhängig davon, ob selbst ein reines Markdown-Dokument XSS-Angriffe enthalten kann. Wenn Sie oder Ihre Benutzer also _blank - Links erstellen möchten, können sie dies wahrscheinlich immer noch.

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

310
Matchu

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

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

Ich glaube nicht, dass es eine Abschriftenfunktion gibt.

Möglicherweise sind jedoch auch andere Optionen verfügbar, wenn Sie Links, die außerhalb Ihrer eigenen Website 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 .

103
alex

Mit Markdown-2.5.2 können Sie Folgendes verwenden:

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

In meinem Projekt mache ich das und es funktioniert gut:

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

Link

Aber nicht alle Parser lassen Sie das zu.

6
user5036455

Eine globale Lösung besteht darin, <base target="_blank"> In das <head> - Element Ihrer Seite einzufügen. Dies fügt effektiv jedem Ankerelement ein Standardziel hinzu. Ich benutze Markdown, um Inhalte auf meiner Wordpress-basierten Website zu erstellen. Mit meinem Design-Customizer kann ich diesen Code oben auf jeder Seite einfügen. Wenn Ihr Theme das nicht macht, gibt es ein Plug-in

6
aholub

Sie können dies mit nativem Javascript-Code wie folgt tun:

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

JSFiddle Code

6
MrPenguin Pablo

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.

Funktioniert auch als Direktlink:
[Go to this page](http://somelink.com/?target=_blank)

6
Peter Danshov

Für Ghost Markdown verwenden Sie:

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

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

6
guya

Es gibt keine einfache Möglichkeit, dies zu tun, und wie @alex festgestellt 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 zu den Inhalten 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 kompatibel mit IE8 + und Sie können ihn unten auf Ihrer Seite einfügen. Beachten Sie, dass Sie ".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/

4
midudev

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 hat pandoc eine Erweiterung zum Aktivieren von link_attributes , das Markup im Link erlaubt. z.B.

[Hello, world!](http://example.com/){target="_blank"}
  • Für diejenigen, die von [~ # ~] r [~ # ~] kommen (zB mit rmarkdown, bookdown, blogdown und so weiter ), dies ist die von Ihnen gewünschte Syntax.
  • Für diejenigen, die nicht [~ # ~] r [~ # ~] verwenden, müssen Sie möglicherweise die Erweiterung aktivieren im Aufruf von pandoc mit +link_attributes

Hinweis: Dies unterscheidet sich von der kramdown -Parserunterstützung, 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.B.

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

Speziell:

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

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

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

0
Jose Espin

Wird nur für externe Links mit GNU sed & make automatisiert

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

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

Dies kann durch Hinzufügen des obigen Befehls sed zu einem makefile weiter automatisiert werden. Für Details siehe GNU make oder siehe, wie ich das gemacht habe auf meine Website =.

0
Serge Stroobandt

Ich stimme nicht zu, dass es eine bessere Benutzererfahrung ist, in einem Browser-Tab zu bleiben. Wenn Sie möchten, dass Personen auf Ihrer Website bleiben oder den Artikel zu Ende lesen, senden Sie sie in einem neuen Tab weiter.

Aufbauend auf der Antwort von @ davidmorrow, werfen Sie dieses Javascript in Ihre Website 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>
0
Danny

Für abgeschlossene alex beantwortet (13. Dez. 10)

Ein intelligenteres Injektionsziel könnte mit diesem Code 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 regulären Ausnahmen ändern, indem Sie im Gruppenkonstrukt (?!html?|php3?|aspx?) Weitere Erweiterungen hinzufügen (verstehen Sie diese regulären Ausnahmen hier: https://regex101.com/r/sE6gT9/ ).

und für eine jQuery-Version ohne, ü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';
        } 
    }
}
0
Bruno Lesieur

Sie können beliebige Attribute mit {[attr] = "[prop]"} hinzufügen.

Zum Beispiel [Google] ( http://www.google.com ) {target = "_blank"}

0
leonardli

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

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

Im Markdown habe ich die gesamte Link-Ausgabe auf <a target='_blank' href="..."> Geändert, was mit Suchen/Ersetzen einfach genug war.

0
user3167223