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

Advanced Markdown features and usage

Practical ways to use target="_blank"

Working with HTML is one way, but what about using Markdown extended features with parsers like pandoc or Kramdown? They provide syntax that includes additional attributes like target="_blank":

• Kramdown: [Awesome Link](http://awesomeness.com){:target="_blank"}
• Pandoc: Enable +link_attributes to use [Awesome Link](http://awesomeness.com){target="_blank"}

Always remember to check if your Markdown parser supports target="_blank" in their docs.

Cross-site scripting (XSS) security concerns

When you mix HTML with Markdown, it's essential for your code to have its shots, meaning you must sanitize your input to prevent potential XSS injections. Always follow HTML filtering best practices, mostly when dealing with user-generated content.

JavaScript: Getting handy with dynamic attribute setting

JavaScript allows you to set target="_blank" on external links after the page has loaded, so no more sifting through your Markdown!

// Because who doesn't love changing stuff after it's done? 😉
document.querySelectorAll('a[href^="http://"], a[href^="https://"]').forEach(link => {
  if(link.hostname !== location.hostname) {
    link.target = '_blank';
  }
});


This script eliminates the jQuery dependency and modifies all external links to open in a new tab dynamically.

More about opening in new tabs

Reducing the friction even more

If you're using Markdown flavors like R Markdown, you're in for a treat! Just use [Link Text](URL){target="_blank"} and you get out-of-the-box support.

Did you know?

Users can use Ctrl+Click or ⌘+Click (on Mac) to manually open links in new tabs. No extra coding needed. Pure user prowess at work.

Alternative methods: jQuery and Custom Extensions

jQuery fans, too, can leverage the framework to auto-target external links with a simple script:

// jQuery enters the chat
$(document.links).filter(function() {
  return this.hostname !== window.location.hostname;
}).attr('target', '_blank');


And if you're seeking something more bespoke, explore making your custom Markdown extensions!

Important considerations

User-experience and the 'target="_blank"' decision

Rushing to set target="_blank" on every link might feel tempting, yet consider your user experience (UX) design. Employ this feature responsibly since it can potentially interfere with the native browsing flow.

Accessibility and Performance: A double win

When using target="_blank", pairing it with rel="noopener noreferrer" gives you security and performance perks in modern browsers:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">New Tab Link</a>