How To Make A Markdown Link Open In Another Tab

Sometimes it's important not to break a reader's flow by redirecting them away from your markdown document when they click on a link. In this case, such links should open up in a different tab in their browser, unfortunately, the commonMark document which is a specification for the Markdown syntax does not describe a way to implement this.

This means different systems adopt different syntax structures or ways to enable this.

Using Anchor tags

Most markdown parsers will allow HTML to co-exist with markdown without escaping the HTML. This means if you write or add any HTML in your markdown it will show up when it's finally rendered. This allows you to use the HTML anchor tag when you need to add an external link instead of the []() syntax in markdown. You just add the target="_blank" attribute to your anchor tag so the links open up in a different browser tab.


01:     <a href="placeholder.com" target="_blank">Opens in new tab</a>

The only downside to this is that your markdown document is no longer purely markdown as it contains HTML. This may or may not be a problem depending on your use case.

Using a base element

One way to ensure links in your page open up in a new tab without using the a tag is to add the following snippet to your markdown


01: <base target="_blank">

You can place this at the top of the markdown page. This will add target="_blank" to every link on your page.

Beware this may cause other links such as the navbar links to open up externally.

Using a redirect service

What if you want only certain links to open up externally?

I came up with https://external.ink. All you have to do is append your link to the URL and reference it in your markdown and it takes over from there.


01: [Opens in new tab](https://external.ink?to=/placeholder.com)

All links in this article use this implementation. It is also open source so feel free to clone and run your copy if you want to. It's pretty easy to host as it's just HTML, CSS, and Javascript.

Here is another article for you 😊 "Markdown hacks for technical writers"