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

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

How to create links in Hugo content markdown

Internal links

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:

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

External links

Standard markdown syntax for links are supported.

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

Link target='_blank' support for external link

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:

External link with _target blank
[Ref with_target blank](null)
[Relref with_target blank](null)
Internal link without target blank
Reference internal link without target blank

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"}