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
- The Markdown renderer has changed in the latest Hugo v0.62.0 from
Blackfriday
toGoldmark
which should allow Hugo markdown to be more compatible with other markdown flavours, such as that of GitHub. - In order to open links in new tab with the
Goldmark
markdown renderer, create a file atlayouts/_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>
Top comments (0)