How to Open Link in New Tab with Hugo's new Goldmark Markdown Renderer

This post was originally published on my blog, find original post here.

Hugo is a blazing fast static site generator, which makes it a terrific choice to create your blogs. It's written in Go and uses Go's templating language to generate blog content with customizable templates for styling.

Check out this article for a good overview of Hugo, and how to get your blog online with Hugo + Netlify.

Furthermore, Hugo uses Markdown to render your content, which is similar to the rendering mechanisms used by other blogging engines, such as Jekyll (used by Github Pages) and DEV.TO.

How to open links in a new tab with markdown in Hugo?

When creating my blog in Hugo, I wanted to open links in a new tab (i.e. add a target="_blank" attribute to the links). However, by default, an inline style link in Markdown opens in the same tab, which means that your reader may leave your blog and go to a different site, never to return.

Until recent versions of Hugo, it had been using the Blackfriday Markdown renderer, which while convenient, is not CommonMark standards-compliant. With Blackfriday, I could achieve my desired behaviour by adding the following configuration to the config.toml file:

[blackfriday]
hrefTargetBlank = true

However, in the latest Hugo v0.62.0, this doesn't work anymore as the default markdown renderer has changed to Goldmark, which is CommonMark compliant and allows for custom templates to render links and images from markdown. Thus, if you want to open your blog's links in a new tab (which is not supported by default), you'll have to use a custom markdown render hook to add the target="_blank" attribute to the links.

Render Hooks with Goldmark

Goldmark and Markdown Render Hooks are a new feature in Hugo v0.62.0 so please make sure that your Hugo version is equal to or greater than this version.

Markdown Render Hooks offer you several ways to extend the default markdown behaviour, e.g. resizing of uploaded images, or opening links in new tabs. You can do this by creating templates in the layouts/_default/_markup directory with base names render-link or render-image. Your directory layout may look like this:

layouts
└── _default
└── _markup
├── render-image.html
├── render-image.rss.xml
└── render-link.html

Sample render hook to open link in new tab

Say you have an inline-style link in Markdown such as the follows with the Destination as https://en.wikipedia.org/wiki/Pizza, Text as Pizza and Title as Yum Yum:

[Pizza](https://en.wikipedia.org/wiki/Pizza "Yum Yum")

By default, this link would open in the same tab.

Now add the following HTML template file (or render hook) at layouts/_default/_markup/render-link.html:

<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text }}</a>

You'll find that the previous link now opens in a new tab!

For internal blog links (which you would want to open in the same tab), you can use the relative link of the post, e.g. for a sample-post.md file within the posts directory, you could use

[Sample post](/posts/sample-post/)

TL;DR

1. The Markdown renderer has changed in the latest Hugo v0.62.0 from Blackfriday to Goldmark which should allow Hugo markdown to be more compatible with other markdown flavours, such as that of GitHub.
2. In order to open links in new tab with the Goldmark markdown renderer, create a file at layouts/_default/_markup/render-link.html with the following content:

<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text }}</a>