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

Aug 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 "" */>}})Output: <a href="">ref slug only</a>[ref path + slug]({{</* ref "tutorials/hugo/" */>}})Output: <a href="">ref path + slug</a>[refrel]({{</* relref "" */>}})Output: <a href="/tutorials/hugo/how-to-install-hugo-on-ubuntu/">refrel</a>

Sample output of the above markdown:

  • [ref slug only](null)
  • [ref path + slug](null)
  • [refrel](null)

Standard markdown syntax for links are supported.

[Lua Software](


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

<a href="" 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.

  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]( <a href="" target="_blank">External link with _target blank</a>[Ref with_target blank]({{</* ref "" */>}})Output: <a href="" target="_blank">Ref with_target blank</a>[Relref with_target blank]({{</* relref "" */>}})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:


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';   } }


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

[Lua Software]({:target="_blank"}


❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.