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.
24 Answers
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.
-
35
-
2I have javascript run on the page that adds _blank to all links outside of my domain. like @alex has in the next answer Jul 1, 2014 at 12:11
-
4I would suggest (in the desire of being explicit and inline readable) the following syntax:
[Visit this page](http::/link.com(
to get the idea of opening. Mar 6, 2015 at 14:06 -
9Simple target="_blank" may be dangerous! Add also rel="noopener" into the tag! (sites.google.com/site/bughunteruniversity/nonvuln/…) Jul 6, 2016 at 10:12
-
23It's really not always a better user experience to keep things in one browser... What if they are in a sign-up or check-out flow in your SPA, and at the last step they need to agree to some conditions in an external page? Unless you use a modal, opening in a new window would really be preferable to the user completely losing context and having to go through the whole process again. Feb 17, 2020 at 20:02
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"}
-
10
-
90
-
2The kramdown syntax: [link name](url_link){:target="_blank"} can be parsed into HTML using the kramdown online editor: http://trykramdown.herokuapp.com/ I used it because I already had quite a few kramdown references, and wanted to avoid retyping them. Jun 30, 2016 at 11:21
-
4Is there a way in jekyll to set this as the default? I'd like all the links in my blog posts to open with
target="_blank"
Sep 4, 2017 at 20:17 -
26It doesn't work. It just renders the {:target="_blank"} as text. Mar 29, 2019 at 3:31
I don't think there is a markdown feature, although there may be other options available if you want to open links which point outside your own site automatically with JavaScript.
Array.from(document.links)
.filter(link => link.hostname != window.location.hostname)
.forEach(link => link.target = '_blank');
If you're using jQuery:
$(document.links).filter(function() {
return this.hostname != window.location.hostname;
}).attr('target', '_blank');
-
1i agree with you but on the occasion that you are in an iframe you need to blast out of the frame with the link. Nov 3, 2011 at 18:31
-
3I find the only time I force people into a new window is when I'm halfway through a sentence linking somewhere external, and I want to provide sources for my comments without interrupting the flow. This js snippet is ideal for the purpose - thanks, upvoted :) Jun 17, 2012 at 16:20
-
23I think that quote from Jakob Nielson doesn't apply here anymore. He complains about opening new windows, but nowadays target="_blank" opens in a new tab instead. I personally don't like it when links to other domains don't open in new tabs. Jul 17, 2013 at 10:08
-
4Also: because saying
Jakob Nielsen says you shouldn't do that
is a terrible argument. Aug 16, 2013 at 2:29 -
2I'm going to add here that THIS is also preferable as a global solution. It keeps your Markdown clean, which is the point of Markdown. Oct 28, 2015 at 23:10
With Markdown v2.5.2, you can use this:
[link](URL){:target="_blank"}
-
3
-
10Works with Jekyll v2.4.0 (might work with earlier versions as well)– nicksuchJun 22, 2015 at 16:57
-
9
-
3Cannot seem to get this syntax to work in GitLab. I'm not sure which version of Markdown is currently in use. Feb 5, 2016 at 23:46
-
1Is there a way of making this the default so I don't have to specify it for every link?– ConnelFeb 19, 2017 at 13:59
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
-
1
-
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
Not a direct answer, but may help some people ending up here.
If you are using GatsbyJS there is a plugin that automatically adds target="_blank"
to external links in your markdown.
It's called gatsby-remark-external-links and is used like so:
yarn add gatsby-remark-external-links
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [{
resolve: "gatsby-remark-external-links",
options: {
target: "_blank",
rel: "noopener noreferrer"
}
}]
}
},
It also takes care of the rel="noopener noreferrer"
.
Reference the docs if you need more options.
For ghost markdown use:
[Google](https://google.com" target="_blank)
Found it here: https://cmatskas.com/open-external-links-in-a-new-window-ghost/
-
1i like your solution. as i've tried it with different configurations it seems that it only works in inline linking. maybe there is a way for linking with reference links. something like:
[open new window][1] \n [1]: (https://abc.xyz" target="_blank)
. maybe i mistake something, or this isn't ment to work that way?– MrIsaacsApr 5, 2017 at 14:42
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)
-
2
-
Thanks. This still works if the url already has query parameters too, adding
&target=_blank
:[Go to this page](http://somelink.com/?param=42&target=_blank)
– Ted MNov 23 at 21:14
You can do this via native javascript code like so:
var pattern = /a href=/g;
var sanitizedMarkDownText = rawMarkDownText.replace(pattern,"a target='_blank' href=");
In my project I'm doing this and it works fine:
[Link](https://example.org/ "title" target="_blank")
But not all parsers let you do that.
-
Almost works, but even your example renders with url encoded into the title attr, rather than as new attrs (view source or edit the node as html):
<a href="https://example.org/" rel="nofollow" title="title" target="_blank">Link</a>
Oct 16, 2015 at 22:12
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/
If someone is looking for a global rmarkdown
(pandoc
) solution.
Using Pandoc Lua Filter
You could write your own Pandoc Lua Filter which adds target="_blank"
to all links:
- Write a Pandoc Lua Filter, name it for example
links.lua
function Link(element)
if
string.sub(element.target, 1, 1) ~= "#"
then
element.attributes.target = "_blank"
end
return element
end
- Then update your
_output.yml
bookdown::gitbook:
pandoc_args:
- --lua-filter=links.lua
Inject <base target="_blank">
in Header
An alternative solution would be to inject <base target="_blank">
in the HTML head
section using the includes
option:
- Create a new HTML file, name it for example
links.html
<base target="_blank">
- Then update your
_output.yml
bookdown::gitbook:
includes:
in_header: links.html
Note: This solution may also open new tabs for hash (#
) pointers/URLs. I have not tested this solution with such URLs.
In Laravel I solved it this way:
$post->text= Str::replace('<a ', '<a target="_blank"', $post->text);
Not works for a specific link. Edit all links in the Markdown text. (In my case it's fine)
If you work with MkDocs, you might be interested in the Open in a new tab - plugin
This plugin adds JS to open outgoing links and PDFs in a new tab.
Install the plugin using pip from PyPI:
pip3 install mkdocs-open-in-new-tab
Just add the plugin:
plugins:
- search
- open-in-new-tab
More about the plugin.
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.
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>
You can add any attributes using {[attr]="[prop]"}
For example [Google] (http://www.google.com){target="_blank"}
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';
}
}
}
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.
If you just want to do this in a specific link, just use the inline attribute list syntax as others have answered, or just use HTML.
If you want to do this in all generated <a>
tags, depends on your Markdown compiler, maybe you need an extension of it.
I am doing this for my blog these days, which is generated by pelican
, which use Python-Markdown
. And I found an extension for Python-Markdown
Phuker/markdown_link_attr_modifier, it works well. Note that an old extension called newtab
seems not work in Python-Markdown 3.x.
For React
+ Markdown
environment:
I created a reusable component:
export type TargetBlankLinkProps = {
label?: string;
href?: string;
};
export const TargetBlankLink = ({
label = "",
href = "",
}: TargetBlankLinkProps) => (
<a href={href} target="__blank">
{label}
</a>
);
And I use it wherever I need a link that open in a new window.
For "markdown-to-jsx" with MUI v5
This seem to work for me:
import Markdown from 'markdown-to-jsx';
...
const MarkdownLink = ({ children, ...props }) => (
<Link {...props}>{children}</Link>
);
...
<Markdown
options={{
forceBlock: true,
overrides: {
a: {
component: MarkdownLink,
props: {
target: '_blank',
},
},
},
}}
>
{description}
</Markdown>
s
from thehttps:
is enough to get the functionality I want.