Using anchor tags with target attribute in Jekyll with Markdown and Liquid.

If I am on a webpage, reading something, and come across a link I would want to investigate about, and If I click this link, which doesn’t open in a new window, then, I get distracted. Thus whatever it was, that I was reading previously to clicking this said link, is now out of sight, and thus more often than not, out of my mind.

This is the sole reason that I want links, within my posts, to open in a new window. May be these links point to a post within my blog(s), or not. Doesn’t matter. What matters, is that the links open in a new browser window. Thus, if you want to come back, to the what you were initially reading and finish, then that post, is not of your sight and not out of your mind.

Markdown does not support any syntax that would make a link, open in a new window. I was’nt aware of this.

But, what many other’s aren’t aware of is that Kramdown - a markdown preprocessor, which comes bundled with Jekyll, does actually have a syntax that you can use to create link that opens in a new browser window.

Markdown syntax for opening links in a new window: (Only works with Kramdown)

1 This is [a link](http://example.com){:target="_blank"} that opens in a new window.

Now, if you are someone who doesn’t use Markdown, HTML or doesn’t use Kramdown, with Jekyll, for preprocessing markdown, and you are still using Jekyll then, here’s a little plugin that add’s a liquid tag which, makes it possible, for your links to open in a new window.

Simply copy paste this code into a .rb (ruby) file. Save the .rb (ruby) file into your _plugins folder. Then just use the liquid tag extension, like shown in the next code block, below.

 1 # _plugins/target_anchor.rb
 2 
 3 #for a post at http://indefiniteloop.com
 4     require 'liquid'
 5 
 6     # Returns a HTML achor tag with target="_blank"
 7     
 8 module TargetAnchor 
 9   def open_in_new_window(input, url)
10     return '<a href="' << url << '" target="_blank">' << input << '</a>'
11   end
12 end
13 
14 Liquid::Template.register_filter(TargetAnchor)

Here’s the github gist for the above code.

Using the plugin to make links open in a new window, instead of Markdown.

{{ "example" | open_in_new_window: "http://example.com" }}