How to open shortcode links in a new tab?

support
1

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!

2

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"

3

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).

4

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?

5

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).

6

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
7

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