How to get footnotes in a table with a custom table style

Hi,

I have a table that has a specific style using a shortcode:

{{<table "table table-striped table-bordered table-sm">}}
...
{{</table>}}

The shortcode shortcodes/table.html is copied from https://willschenk.com/articles/2020/styling_tables_with_hugo/:

{{ $htmlTable := .Inner | markdownify }}
{{ $class := .Get 0 }}
{{ $old := "<table>" }}
{{ $new := printf "<table class=\"%s\">" $class }}
{{ $htmlTable := replace $htmlTable $old $new }}
{{ $htmlTable | safeHTML }}

This works fine, except for footnotes.

This footnote[^1] works.

{{<table "table table-striped table-bordered table-sm">}}
| A | Table |
|---|---|
| but | this[^2] footnote doesn't |
{{</table>}}

[^1]: First
[^2]: Second

I assume that markdownify is the cause. But how to solve this (or better alternatives)?

If you only want to inject CSS classes, you are maybe better off using a CSS block attribute. Then you do not have to handle the table content separately.

1 Like

I’m not sure I understand…

Check the documentation

in particular the text under attribute.

Basically, you’d write

{ class="table table-striped table-bordered table-sm"} 

right below the last line of your table in your MD file

1 Like

There’s even a shorter form:

{ .table .table-striped .table-bordered .table-sm }

Words prefixed with a dot are treated as classes; words prefixed with a # are treated as identifiers (id attribute). E.g.: { .this-is-a-class .another-class #this-is-an-identifier }

2 Likes

Thanks for all the pointers and info. I must be doing something wrong since I just get the { ... } line in the first cell of the next row of the table…?

This footnote[^1] works.

| A | Table |
|---|---|
| but | this[^2] footnote doesn't |
{ .table .table-striped .table-bordered .table-sm }

[^1]: First
[^2]: Second

hugo v0.87.0-B0C541E4 linux/amd64 BuildDate=2021-08-03T10:57:28Z VendorInfo=gohugoio

config.toml

[markup.goldmark.parser.attribute]
block = true

markdown

This footnote[^1] works.

| A | Table |
|---|---|
| and | this[^2] works too!|
{ .table .table-striped .table-bordered .table-sms }

[^1]: First
[^2]: Second
2 Likes

@jmooring That was the missing piece of info! By default block = false.

BTW: The pointer to this section of the Goldmark documentation shows a page that reads “Currently only headings support attributes.” which is rather confusing.

That is the documentation for Goldmark.

This is the documentation for Hugo:

1 Like

To clarify, this is a Hugo feature, and is not part of Goldmark. See

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.