Insert br tag in table (shortcode in shortcode)

1

Hello, I’m new to Hugo and I’m working on converting several Hugo documents from pre-0.60 to post-0.60 (unsafe=true). They are using the learn theme. I’ve got a big table that has multiline cells where we inserted raw <br> tags. The table initially didn’t have a horizontal scrollbar, so I created the following shortcode:

<div class="table-container">
    {{ .Inner | markdownify }}
</div>

And inserted my shortcode at the start ({{< table-div >}}) and end of the table ({{< /table-div >}}) and wrote the proper css. I also wanted to convert the <br> tags to shortcodes, but whatever I do, Hugo won’t output the HTML. I tried with the shortcode {{ .Inner }}</br> and several other variations.
I’m probably missing something very simple… Any ideas on how to properly do this?

2

Please post a sample markdown file, or better yet, point us to a git repository of your site. The problem statement is unclear.

3

In short: Use {{% instead of {{<. One does process markdown and shortcodes, the other not. Could be that I understand your question wrong, sorry, as @jmooring wrote, samples, samples, samples or even better a public repo with a test case. :slight_smile:

4

I can’t show the actual content as it’s internal documentation. However, the original table looks like this:

|    | Header 1 | Header 2 | Header 3 | Header 4 |
|----|----------|----------|----------|----------|
|  1 | - Long sentence 1<br>- Long sentence 2<br>- Long sentence 3 | data 1 | data 2 | data 3 |
|  2 | - Long sentence again<br>- Another long sentence | data 1 | data 2 | data 3 |

It’s the <br> tags I’m having problems with after I added:

{{< table-div >}}
|    | Header 1 | Header 2 | Header 3 | Header 4 |
|----|----------|----------|----------|----------|
|  1 | - Long sentence 1<br>- Long sentence 2<br>- Long sentence 3 | data 1 | data 2 | data 3 |
|  2 | - Long sentence again<br>- Another long sentence | data 1 | data 2 | data 3 |
{{< /table-div >}}

If I change {{< table-div >}} to {{% table-div %}}, the scrollbar disappears.

5

This shortcode works with unsafe = false under [markup.goldmark.renderer] in config.toml.

<div class="table-container">
  {{- $inner := replace .Inner "<br>" "@@br@@" | markdownify -}}
  {{- $inner = replace $inner "@@br@@" "<br>" | safeHTML -}}
  {{- $inner -}}
</div>
6

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