Hugo

How to open shortcode links in a new tab?

So with Goldmark the standard now, opening links external links in a new tab is a bit more involved. But for my regular content I got this fixed thanks to the helpful posts here and here on the forum. :slight_smile:

But how do I get the links that a shortcode runs through markdownify to also open in a new window?

Because that doesn’t invoke render-link.html so I can’t add external links that way. Anyone has an idea? Thanks!

It would be helpful for us to help to see your shortcode!

The trick is to modify the link in the shortcode.

<a href="{{ .url }}" target="_blank" >{{ .title }}</a>

add the target= "_blank"

Thanks for the quick reply! :slight_smile:

I wasn’t super clear it seems. Sorry for that. I meant the links that text, which runs through the shortcode, should open in a new tab. My shortcodes simply have variations on this:

{{ .Inner | markdownify }}

So the shortcode itself doesn’t have <a> links, but they still happen inside the shortcode (if you know what I mean).

I’m a bit confused: if all you are doing is running ‘markdownify’, why not remove the shortcodes and let Goldmark and link templates do their thing?

Thanks for responding!

Because my shortcodes also do other things. For example, this is one full shortcode:

<div class="hlight note">

    <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><polygon points="22.186 10.52 14.054 18.652 9.814 14.411 8.4 15.825 14.054 21.48 23.6 11.934"/></svg>

    <p>{{ .Inner | markdownify }}</p>

</div>

Having Goldmark process the shortcode is, since Hugo 0.55, not the proper way since {{< for content that should not be in the TOC and footnotes “is the better alternative” (according to the release notes).

Frog Goldmark and “open in a new tab” you need this:

This does not currently work in markdownify (I was lazy), but this new method is a drop-in replacement for markdownify:

1 Like

Thanks, .RenderString does the job for all [link](http...) links. :slight_smile:


But most of my shortcode content has literal links, like this:

Hugo Docs. *Directory Structure*. Retrieved from https://gohugo.io/getting-started/directory-structure/

Blackfriday with hrefTargetBlank = true turns that automatically into:

<p>Hugo Docs. <em>Directory Structure</em>. Retrieved from <a href="https://gohugo.io/getting-started/directory-structure/" target="_blank">https://gohugo.io/getting-started/directory-structure/</a></p>

Goldmark does turn literal links into <a href>. But render-link.html doesn’t activate for them.

Instead I get from my shortcodes:

<p>Hugo Docs. <em>Directory Structure</em>. Retrieved from <a href="https://gohugo.io/getting-started/directory-structure/">https://gohugo.io/getting-started/directory-structure/</a></p>

(So no target="_blank" added.)

Is there something I overlooked to make .RenderString and render-link.html catch the literal links that Goldmark turns into <a href>?

1 Like