How To Create Link With target='_blank' In Hugo Markdown

August 6, 2017
Using html or javascript or enable BlackFriday.hrefTargetBlank

I would prefer for external links to open in new tab while internal links open within the same tab.

Usually we use ref (absolute full link) and relref (relative link) to create links. The nice things about using this shortcode is that it will auto resolve the full path using just the slug.

[ref slug only]({{< ref "how-to-install-hugo-on-ubuntu.md" >}})
Output: <a href="https://code.luasoftware.com/tutorials/hugo/how-to-install-hugo-on-ubuntu/">ref slug only</a>

[ref path + slug]({{< ref "tutorials/hugo/how-to-install-hugo-on-ubuntu.md" >}})
Output: <a href="https://code.luasoftware.com/tutorials/hugo/how-to-install-hugo-on-ubuntu/">ref path + slug</a>

[refrel]({{< relref "how-to-install-hugo-on-ubuntu.md" >}})
Output: <a href="/tutorials/hugo/how-to-install-hugo-on-ubuntu/">refrel</a>

Sample output of the above markdown:

Standard markdown syntax for links are supported.

[Lua Software](http://www.luasoftware.com)

HTML

The easiest method is to use HTML directly for external link.

<a href="http://www.luasoftware.com" target="_blank">Lua Software</a>

BlackFriday markdown

You can configure BlackFriday markdown to enable hrefTargetBlank where all external links shall be generated with target='_blank'.

Add the following configuration to config.toml.

# https://gohugo.io/getting-started/configuration/#configure-blackfriday
[blackfriday]
  plainIDAnchors = true
  hrefTargetBlank = true

The problem with using this method is that internal links generated using rel and refrel shall have target='_blank' attribute as well (Issue #2424).

For internal links, use standard markdown syntax for links or reference link.

[External link with _target blank](http://www.luasoftware.com/)
Output: <a href="http://www.luasoftware.com/" target="_blank">External link with _target blank</a>

[Ref with_target blank]({{< ref "how-to-install-hugo-on-ubuntu.md" >}})
Output: <a href="https://code.luasoftware.com/tutorials/hugo/how-to-install-hugo-on-ubuntu/" target="_blank">Ref with_target blank</a>

[Relref with_target blank]({{< relref "how-to-install-hugo-on-ubuntu.md" >}})
Output: <a href="/tutorials/hugo/how-to-install-hugo-on-ubuntu/" target="_blank">Ref with_target blank</a>

[Internal link without target blank](/tutorials/hugo/how-to-install-hugo-on-ubuntu/)
Output: <a href="/tutorials/hugo/how-to-install-hugo-on-ubuntu/">Internal link without target blank</a>

[Reference internal link without target blank][how-to-install-hugo-on-ubuntu]
Output: <a href="/tutorials/hugo/how-to-install-hugo-on-ubuntu/" target="_blank">Reference internal link without target blank</a>

...

<!-- Keep all internal link references at bottom of the page -->
[how-to-install-hugo-on-ubuntu]: /tutorials/hugo/how-to-install-hugo-on-ubuntu/

Sample output of the above markdown:

JavaScript

You can use javascript to detect all external links and add target='_blank' attribute to them.

var content = document.getElementById("content");
var links = content.getElementsByTagName("a");

for (var i = 0, linksLength = links.length; i < linksLength; i++) {
   if (links[i].hostname != window.location.hostname) {
      links[i].target = '_blank';
   } 
}

Markdown

Some variety of markdown support the following syntax, but not supported in Hugo/BlackFriday.

[Lua Software](http://www.luasoftware.com){:target="_blank"}

References

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.