Hugo 0.55.* broke my shortcodes

support
1

I have a simple shortcode:

<div class="{{ if .Get "class" }}{{ .Get "class" }}{{ else }}table{{ end }}">
    {{- .Inner -}}
</div>

It’s used to wrap a markdown-formatted table in a simple div, so it’s used like this in an actual post.md file:

{{% table %}}
| Column should align left | Column should align center | Column should align right |
|:----------- |:-------------:| ------------:|
| align: left | align: center | align: right |
| align: left | align: center | align: right |
| align: left | align: center | align: right |
{{% /table %}}

Previously it would render as:

<div class="table">
<table>
<thead>
<tr>
<th align="left">Column should align left</th>
<th align="center">Column should align center</th>
<th align="right">Column should align right</th>
</tr>
</thead>

<tbody>
<tr>
<td align="left">align: left</td>
<td align="center">align: center</td>
<td align="right">align: right</td>
</tr>

<tr>
<td align="left">align: left</td>
<td align="center">align: center</td>
<td align="right">align: right</td>
</tr>

<tr>
<td align="left">align: left</td>
<td align="center">align: center</td>
<td align="right">align: right</td>
</tr>
</tbody>
</table>
</div>

However installing 0.55.3 today broke rendering, and I end up with this:

<div class="table">
| Column should align left | Column should align center | Column should align right |
|:----------- || ------------:|
| align: left | align: center | align: right |
| align: left | align: center | align: right |
| align: left | align: center | align: right |
</div>

Of course I tried the fix listed on in the release notes, so I prepended the “old behavior” line to my shortcode template:

{{ $_hugo_config := `{ "version": 1 }` }}
<div class="{{ if .Get "class" }}{{ .Get "class" }}{{ else }}table{{ end }}">
    {{- .Inner -}}
</div>

However now all I get is this:

<div class="table"><p>| Column should align left | Column should align center | Column should align right |
|:&mdash;&mdash;&mdash;&ndash; || &mdash;&mdash;&mdash;&mdash;:|
| align: left | align: center | align: right |
| align: left | align: center | align: right |
| align: left | align: center | align: right |</p>
</div>

I have tried the latest v0.56.0-DEV build and got exactly the same results. I have also tried every conceivable variant on changing from {{% to {{< form and using markdownify, to no avail.

As I can’t find an obvious way in which the new default benefits me I’m a bit stymied.

Anyone see a fix?

1 Like
2

Have you tried 0.55.4?

3

Yes, should have mentioned that: tried 0.55.3, 0.55.4, and 0.56.0-DEV, same behaviour in all cases.

4

With 0.55.3 here’s how i define my shortcode

And how i call it

https://lil-boot-hugo-theme.netlify.com/lil-boot-typography/#table

1 Like
5

Directly copied from your example above and it’s still failing. It’s like markdownify isn’t working at all.

6

Ok, found the issue.

This is a perfectly valid table with Blackfriday’s Table extension enabled:

| Column should align left | Column should align center | Column should align right |
|:----------- |:-------------:| ------------:|
| align: left | align: center | align: right |
| align: left | align: center | align: right |
| align: left | align: center | align: right |

When rendered the centre column have its contents centred inside the middle column, as desired.

Take the same string as a raw string inside a shortcode template and run it through markdownify and it works fine.

However the .Inner member of the shortcode struct will elide all of the alignment characters in the centre column, resulting in:

| Column should align left | Column should align center | Column should align right |
|:----------- || ------------:|
| align: left | align: center | align: right |
| align: left | align: center | align: right |
| align: left | align: center | align: right |

Which is an invalid table and so gets rendered in the original markdown syntax.

So a bug somewhere in the shortcode.Inner implementation?

4 Likes
7

I’m having this same issue in version v0.55.6, just spent 2 hrs trying to figure it out what was going wrong.

Passing .Inner to markdownify works without a problem, as long as there is no centered column in the table.

I saw the issue was closed, but apparently there is no solution, how did you get around this? should i reopen the issue?

8

This should not be closed, there is no solution and the bug remains; I just stopped centering tables for the time being.

9

@yawpitch @emilio1625

Hello there is a relevant issue about this on GitHub that you can follow:

Also there is is an upstream issue with Blackfriday (the markdown library that Hugo uses) because it outputs invalid HTML for centered table columns. This is an issue that predates Hugo 0.55

Feel free to voice your opinion here:

Also note that the recommended way to center table columns these days is with CSS.