Target=_blank inside Goldmark tables not working

support
1

Hello, I followed the render-link trick to get target=_blank on every http/s links which works fine on the website.

However I run into a problem inside a markdown table.

|      Nothing     | Link target=_blank |
| :--- | :--- |
| Nothing |  [Example](http://example.com) |

The target attribute is totally ignored and I don’t know why… Is there any tricks to make it working ?

2

What exactly is that “trick”?

3

He’s talking in context to this: Simple way to open in a new tab

@alnc can you please share a simple repo reproducing this issue, because it’s working fine for us. Are you sure you’ve use the render-link.html file correctly?

Just to clarify, it should exist at: layouts/_default/_markup/render-link.html.

Are you using a theme or something?

4

Yes render-link.html is in the right directory.
I made a theme by myself, very basic for now.

And I just find out that it works with tables, you are right, my mistake…

It helped me to find that the problem is a shortcode.
On the website I had to put one table after the other without any text in between. So I made a shortcode to wrap each one in order to make it work and get control of the space between tables.

The shortcode is wraptable.html

<div class="table-wrapper">
    {{ .Inner | markdownify }}
</div>

And this breaks the target attributes for all links inside the wrapped tables

{{< wraptable >}}

|      `dd.mm.yy`     | **First table** |
| ---: | :--- |
| `30.08.19` | [Link](http://example.com) |

{{< /wraptable >}}

{{< wraptable >}}

|      `dd.mm.yy`     | **Second table** |
| ---: | :--- |
| `10.06.19` | [DuckDuckGo](https://duckduckgo.com/) |

{{< /wraptable >}}

I guess it’s the markdownify attribute, but I can’t see which one I should use to render the markdown and keep the target=_blank on my links…

5

Ahh, I can reproduce this. You’re right. It doesn’t work with this setup. I don’t have a reason why, but, you’re probably right. It might be the markdownify function. Maybe someone else can confirm?

I might have a workaround though. In your config.toml, you can add this:

[markup.goldmark.renderer]
    unsafe = true

and then, in your markdown file itself, you can use the table like:

<div class = "table-wrapper">

    |`dd.mm.yy`         |**First table**                      |
    |------------------:|:------------------------------------|
    |`30.08.19—01.09.19`|blablabla, [Link](http://example.com)|

</div>

This way, you won’t need the shortcode and the links work fine.

EDIT:

Untested, but, might work. If you don’t want to enable unsafe Goldmark, you can create a link shortcode and use it within your wraptable shortcode. From what I know, nesting shortcodes is possible, so, that should work.

6

Thank you for your time and your help.
I will try the first solution, and I hope there will be no inconvenient on the whole site later.

If I understand your edit, the last one should work but might cause troubles on where to edit the file. I would prefer it stays in the content section and not have to write inside a shortcode section.

If anyone as a better solution, to avoid goldmark.renderer and a better way to write my wraptable shortcode…

Thank you

7

Well, this is what I meant in my edit:

{{< wraptable >}}

|`dd.mm.yy`         |**First table**                                         |
|------------------:|:-------------------------------------------------------|
|`30.08.19—01.09.19`|{{% link href = "https://www.abc.com/" text = "abc" %}}|

{{< /wraptable >}}

and in your layouts/shortcode/link.html:

<a href = "{{ .Get `href` }}" target = "_blank" rel = "nofollow noopener noreferrer">

    <span>

        {{ .Get "text" }}

    </span>

</a>

This just worked in my test.

So, in this approach, you don’t need to enable the unsafe markdown and no need to edit any other files. It’s all in your content.md file.

8

Ha yes sorry, I understand what you meant.
I already planned to do this with a link shortcode in fact, but still a trick and not resolving the issue clearly. Many thanks.

1 Like
9

Hi,

I would recommend adding target=_blank with JavaScript instead of adding accessibility to your markdown content to keep things separated.

10

Better option, don’t do it. Users who want to open a link in a new tab will do, those that don’t wont. Good UX starts with not disabling a users browser features…

As true today as it was in 1999: The Top 10 Web Design Mistakes of 1999

See also: Understanding Success Criterion 3.2.5 | Understanding WCAG 2.0

2 Likes