Jekyll: produce custom HTML for external links (target and CSS class)
css, jekyll, kramdown, liquid
Solution
It seems writing a plugin is straight forward. This is what I have come up with:
module Jekyll
class ExtLinkTag < Liquid::Tag
@text = ''
@link = ''
def initialize(tag_name, markup, tokens)
if markup =~ /(.+)(\s+(https?:\S+))/i
@text = $1
@link = $3
end
super
end
def render(context)
output = super
"<a class='external' target='_blank' href='"+@link+"'>"+@text+"</a>"
end
end
end
Liquid::Template.register_tag('extlink', Jekyll::ExtLinkTag)
Example usage:
Exhibition at {% extlink Forum Stadtpark http://forum.mur.at %}.
HTML output:
<p>Exhibition at <a class="external" target="_blank" href="http://forum.mur.at">Forum Stadtpark</a>.</p>
Problem
I understand that the `target` attribute of an `<a>` link cannot be specified by CSS. I would like to be able to generate external links in a Jekyll based markdown document with the following output: ``` <a href="the-url" class="external" target="_blank">the text</a> ``` without resorting to something like this: ``` [the text](the url){:target"_blank" class="external"} ``` I don't want to hard-code the `target` in each link, because I might want to change it at some point, also it's noisy. So ideally I would have ``` [the text](the url){:class="external"} ``` ...but then CSS cannot add the `target="_blank"`. So my idea would be a custom plugin that allows me to write ``` {% ext-link the-url the text %} ``` Does such a plugin exist? Are there better ways to achieve this?