Table styling problem

support
1

In hugo version v0.77.0 with hugo-theme-techdoc I’m trying to render a table with some specific styling.

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

There’s obviously something I don’t get about markdownify and / or safeHTML

What can I do to make this bootstrap-table Hugo tag accept my table with images or other hugo shortcodes in it?

1 Like
2

Did call {{% bootstrap-table %}} instead of {{<-delimiters help?

3

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.

{{ $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>