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

Question

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?

leoybkim · Accepted Answer · 2020-11-01T20:22:46.740

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

score 0 · Answer 2 · answered Nov 01 '20 at 16:42

I tried all sorts of combinations of {{<. {{%. and so on. No joy. It looks like markdownify referenced from a shortcode definition doesn't allow embedded shortcodes that themselves render HTML.

This {{< tablestyle class="table-striped" >}} shortcode did work for me; it adds the class or classes to all tables in the page in the browser after the page loads, and it sets the tables' ids to table_0, table_1, etc.

A bit javascript-kludgey, but it works.

{{ $classes := .Get "class" }}
{{ $name := .Get "name" }}
{{ $filename := .Page.File.BaseFileName }}
<script>
  window.addEventListener('DOMContentLoaded', (event) => {
      try {
        var filename = {{ $filename }} || "page"
        filename = filename.toLowerCase()
        var name = {{ $name }}
        name = name || filename || "t"
        var tables = document.querySelectorAll("body section article table")
        var classes = {{ $classes }}
        var classarray = classes.split(/\s+/)
        for (var i = 0; i < tables.length; i++){
          var table = tables[i]
          for (var c = 0; c < classarray.length; c++ ) {
            table.classList.add(classarray[c])
          }
          var id = "table_" + i
          if (!table.id) table.id = id
          if (!table.getAttribute("name")) table.setAttribute ("name", id)
          table.classList.add(id)
          table.classList.add(name + "_table")
        }
      }
      catch (e) {
        /* empty, intentionally, don't honk out if this doesn't work. */
      }
    });
</script>

score 0 · Answer 3 · answered Oct 12 '21 at 16:17

here is the ultimate table shortcode.

Features: HTML5 compatibility (no align-*), markdown alignment, Bootstrap 4/5 compatibility, support, Schema.org markup, WAI accessibility, custom CSS, custom Id, responsive (with CSS)

<script src="https://gist.github.com/djibe/7a8ba9516f4495dbd6fdf1d1de7a60fe.js"></script>

  {{< table title="Optional title" class="optional CSS class declaration" id="optional- declaration-a-unique-one-will-be-generated" >}}
| Stade | DFG (CKD-EPI) | Définition |
|:-------:|:----------------------:|------------|
| 1     | &gt; 90       | MRC avec DFG normal ou augmenté |
| 2     | 60-89         | MRC avec DFG légèrement diminué |
| 3A    | 45-59         | IRC modérée |
| 3B    | 30-44         | IRC modérée |
| 4     | 15-29         | IRC sévère  |
| 5     | < 15          | IRC terminale |
{{< /table >}}

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

3 Answers3