In hugo (version v0.77.0) I'm trying to render a table with some specific styling. I'm using the
I'm trying to use zwbetz's {{ bootstrap-table "classname" }}
shortcode. It's defined in /layouts/shortcodes/bootstrap-table.html
like this:
{{ $htmlTable := .Inner | markdownify }}
{{ $class := .Get 0 }}
{{ $old := "<table>" }}
{{ $new := printf "<table class=\"%s\">" $class }}
{{ $htmlTable := replace $htmlTable $old $new }}
{{ $htmlTable | safeHTML }}
It works correctly with a trivial table in markdown like so:
{{< bootstrap-table "someclassname" >}}
| animal | sound |
|--------|-------|
| dog | meow |
| cat | woof |
{{< /bootstrap-table > }}
But if the marked-down table contains other Hugo shortcodes, it rejects the table markup and makes an empty table, followed in the generated html by messages (in html comments) saying Hugo rejected some html.
Here's an offending markdown table.
{{< bootstrap-table "someclassname" >}}
| animal | sound |
|--------|-------|
| {{< img src="dog.jpg" alt="Dog" class="align__left size__80" >}} | meow |
| {{< img src="cat.jpg" alt="Cat" class="align__left size__80" >}} | woof |
{{< /bootstrap-table > }}
What can I do to make this bootstrap-table
Hugo tag accept my table with images or other hugo shortcodes in it?
This depends on your img.html
shortcode because the bootstrap-table.html
is rendering the inner HTML with markdownify
. So my guess is that the img.html
is outputting non-markdown syntax so the outer shortcode is not able to comprehend it.
I tested your bootstrap-table.html
shortcode with regular image markdown syntax to insert images and that seems to work fine.
{{< bootstrap-table "someclassname" >}}
| animal | sound |
|--------|-------|
| ![alt text](https://i.imgur.com/JOKsNeT.jpg "cat") | meow |
| ![alt text](https://i.imgur.com/zq0bDrk.jpeg "dog") | woof |
{{< /bootstrap-table >}}