How to Open Link in New Tab with Hugo's new Goldmark Markdown Renderer
Tags: tips, hugo, markdown, webdev
Published: 2019-12-29 16:14:29

---
title: How to Open Link in New Tab with Hugo's new Goldmark Markdown Renderer
published: true
date: 2019-12-29 00:00:00 UTC
cover_image: https://thepracticaldev.s3.amazonaws.com/i/qoj5eqegwwugern9wkrt.png
tags: tips,hugo,markdown,webdev
canonical_url: https://agrimprasad.com/post/hugo-goldmark-markdown/
---

This post was originally published on my blog, find original post [here](https://agrimprasad.com/post/hugo-goldmark-markdown/).

[Hugo](https://gohugo.io/ "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](https://dev.to/effingkay/build-your-own-blog-with-hugo-and-netlify-oi7) 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](https://jekyllrb.com/ "Jekyll") (used by [Github Pages](https://pages.github.com/ "Github Pages")) and [DEV.TO](dev.to "Dev Community").

## 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](https://spec.commonmark.org/0.29/ "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](https://github.com/yuin/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](https://gohugo.io/getting-started/configuration-markup/#markdown-render-hooks "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>
```