Can I create links with 'target=“_blank”' in Markdown?

一世执手 提交于 2019-11-26 04:59:23

问题


Is there a way to create a link in Markdown that opens in a new window? If not, what syntax do you recommend to do this. I\'ll add it to the markdown compiler I use. I think it should be an option.


回答1:


As far as the Markdown syntax is concerned, if you want to get that detailed, you'll just have to use HTML.

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

Most Markdown engines I've seen allow plain old HTML, just for situations like this where a generic text markup system just won't cut it. (The StackOverflow engine, for example.) They then run the entire output through an HTML whitelist filter, regardless, since even a Markdown-only document can easily contain XSS attacks. As such, if you or your users want to create _blank links, then they probably still can.

If that's a feature you're going to be using often, it might make sense to create your own syntax, but it's generally not a vital feature. If I want to launch that link in a new window, I'll ctrl-click it myself, thanks.




回答2:


Kramdown supports it. It's compatible with standard Markdown syntax, but has many extensions, too. You would use it like this:

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



回答3:


I don't think there is a markdown feature.

Though there may be other options available if you want to open links which point outside your own site automatically with 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.

If you're using jQuery it's a tad simpler...

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

jsFiddle.




回答4:


With Markdown-2.5.2, you can use this:

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



回答5:


You can do this via native javascript code like so:

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

JSFiddle Code




回答6:


In my project I'm doing this and it works fine:

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

Link

But not all parsers let you do that.




回答7:


For ghost markdown use:

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

Found it here: https://cmatskas.com/open-external-links-in-a-new-window-ghost/




回答8:


One global solution is to put <base target="_blank"> into your page's <head> element. That effectively adds a default target to every anchor element. I use markdown to create content on my Wordpress-based web site, and my theme customizer will let me inject that code into the top of every page. If your theme doesn't do that, there's a plug-in




回答9:


I'm using Grav CMS and this works perfectly:

Body/Content:
Some text[1]

Body/Reference:
[1]: http://somelink.com/?target=_blank

Just make sure that the target attribute is passed first, if there are additional attributes in the link, copy/paste them to the end of the reference URL.

Also work as direct link:
[Go to this page](http://somelink.com/?target=_blank)




回答10:


So, it isn't quite true that you cannot add link attributes to a Markdown URL. To add attributes, check with the underlying markdown parser being used and what their extensions are.

In particular, pandoc has an extension to enable link_attributes, which allow markup in the link. e.g.

[Hello, world!](http://example.com/){target="_blank"}
  • For those coming from R (e.g. using rmarkdown, bookdown, blogdown and so on), this is the syntax you want.
  • For those not using R, you may need to enable the extension in the call to pandoc with +link_attributes

Note: This is different than the kramdown parser's support, which is one the accepted answers above. In particular, note that kramdown differs from pandoc since it requires a colon -- : -- at the start of the curly brackets -- {}, e.g.

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

In particular:

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

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



回答11:


There's no easy way to do it, and like @alex has noted you'll need to use JavaScript. His answer is the best solution but in order to optimize it, you might want to filter only to the post-content links.

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

The code is compatible with IE8+ and you can add it to the bottom of your page. Note that you'll need to change the ".post-content a" to the class that you're using for your posts.

As seen here: http://blog.hubii.com/target-_blank-for-links-on-ghost/




回答12:


I ran into this problem when trying to implement markdown using PHP.

Since the user generated links created with markdown need to open in a new tab but site links need to stay in tab I changed markdown to only generate links that open in a new tab. So not all links on the page link out, just the ones that use markdown.

In markdown I changed all the link output to be <a target='_blank' href="..."> which was easy enough using find/replace.




回答13:


I do not agree that it's a better user experience to stay within one browser tab. If you want people to stay on your site, or come back to finish reading that article, send them off in a new tab.

Building on @davidmorrow's answer, throw this javascript into your site and turn just external links into links with 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>



回答14:


You can add any attributes using {[attr]="[prop]"}

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




回答15:


For completed alex answered (Dec 13 '10)

A more smart injection target could be done with this 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');

You could change the regexp exceptions with adding more extension in (?!html?|php3?|aspx?) group construct (understand this regexp here: https://regex101.com/r/sE6gT9/3).

and for a without jQuery version, check code below:

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';
        } 
    }
}



回答16:


Automated for external links only, using GNU sed & make

If one would like to do this systematically for all external links, CSS is no option. However, one could run the following sed command once the (X)HTML has been created from Markdown:

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

This can be further automated by adding above sed command to a makefile. For details, see GNU make or see how I have done that on my website.




回答17:


This works for me: [Page Link](your url here "(target|_blank)")



来源:https://stackoverflow.com/questions/4425198/can-i-create-links-with-target-blank-in-markdown

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!