htmltwitter-bootstrapmarkdownhugohugo-shortcode

How to give a Hugo / markdown table a class, when the table contains shortcodes?


In (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?


Solution

  • 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 >}}