Table of contents
- Absolute vs relative URLS
- Using an external library
- Using anchor tags
- Using a base element
- Using a redirect service
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.
Absolute vs relative URLS
The first thing you will want to double-check is if your platform opens up absolute URLs in a different tab and relative URLs within the same tab.
For example, http://example.com/path-to/somewhere will open up in a different tab, and /path-to/somewhere without the base domain will open up within the same tab.
Not all markdown systems support this, but many do.
Using an external library
01: ## Demo Markdown
02:
03: [button textβ](https://eddymens.com)
04:
05: <script src='https://cdn.jsdelivr.net/gh/eddymens/markdown-external-link-script@v2.0.0/main.min.js'></script>
06: I created a simple library that opens up absolute URLs in a new tab.
Follow the following steps to get it to work:
- Pull in the library [β] into your Markdown file.
- From here on out all absolute (external) URLs e.g.:
https://eddymens.com/blogwill open up in a new tab with relative URLs e.g.:/blogopening up within the same tab.
Your Markdown parser should allow script tags for this to work. One way to find out is to copy and add the script above and see if your absolute URLs (external URLs) open up in a new tab.
The source code of this library is on GitHub [β]
Interesting facts: Did you know most backends will fail this validation test [β]?
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)It is 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 you might like π "Diary Of Insights: A Documentation Of My Discoveries"