Making links more accessible by default
Hugo
Static sites
Web development
Accessibility

External Link Icons in Hugo

.  
March 4, 2022
.  
2 min read

I love building websites with Hugo - partly because everything is rendered just the way I want. Here's a markdown rendering hook, making all links open safely in a new tab.

We also need to add an icon (using CSS) to show users what the behaviour of the link will be:

What are Markdown hooks?

Hugo features markdown hooks - so I can intercept the markdown renderer and change the output. In the example above, I’ve maintained the title attribute, but added an {{- if }} condition: if the URL starts with “http” (and therefore also “https”), an extra bit of code is added: that which is required to open in a new tab (safely). Read why this is important here.

Have projects in mind?

Let’s work together

I'm Ben Wilde — a developer who works with startups looking to push digital boundaries.