Hugo can't render org-mode tables correctly

support
1

I’m trying to create a table in my post. Here is a example :

| this is a test | this is a test |
|----------------+----------------|
|            <r> |      <c>       |
|           this |      test      |

It expected result is like:

this is a test this is a test
this test

But it actual result is:

this is a test this is a test
this test

This is the HTML code for table:

<table>
      <thead>
            <tr>
                  <th class="align-right">this is a test</th>
                  <th class="align-center">this is a test</th>
            </tr>
      </thead>
      <tbody>
            <tr>
                  <td class="align-right">this</td>
                  <td class="align-center">test</td>
            </tr>
      </tbody>
</table>

As you can see, Hugo incorrectly converted the align tag to class, the correct tag should be style. But I am not familiar with Go, how can I fix this bug?

2

@kaushalmodi Any thoughts?

In markdown we get the expected result.

col1|col2
--:|:-:
one|two

produces

<table>
  <thead>
    <tr>
      <th style="text-align: right">col1</th>
      <th style="text-align: center">col2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="text-align: right">one</td>
      <td style="text-align: center">two</td>
    </tr>
  </tbody>
</table>
3

I’m not sure how it should work but the class approach could be superior?
You get to set the alignment in css and you could also set something like a margin right on the right aligned ones.

1 Like
4

@akko I you are for Hugo’s built-in Org parser to support this, you will need to file a request on GitHub - niklasfasching/go-org: Org mode parser with html & pretty printed org rendering. also shitty static site generator. .

Update: Nevermind, I see that go-org already supports this.

Hugo incorrectly converted the align tag to class, the correct tag should be style. But I am not familiar with Go, how can I fix this bug?

The go-org package is what’s adding those classes to those table elements. You need to write some CSS for those classes.

Inlining style parameters is generally a bad idea (CSP - Content Security Protection). So I am glad that go-org is using classes instead.

If you need help with CSS, see the tests in this go-org commit that adds the table alignment feature: Add table pretty printing & alignment · niklasfasching/go-org@f28f400 · GitHub

If you use ox-hugo, it supports converting Org’s table column alignment syntax to the Markdown syntax @jmooring showed above.

1 Like
5

Thanks @kaushalmodi.

Yeah, this is a mixed bag.

Inlining the styles produces a better experience for new/casual users, similar to the way that syntax highlighting styles are inlined by default.

With syntax highlighting (Chroma) we can disable the inline styles in favor of an external style sheet created with hugo gen chromastyles --style monokai.

With tables, I suppose if inline styles were blocked by CSP, you could apply an external style by querying the style attribute (don’t judge, just saying…).

td[style="text-align:center"],
th[style="text-align:center"] {
  text-align: center !important;
}

td[style="text-align:left"],
th[style="text-align:left"] {
  text-align: left !important;
}

td[style="text-align:right"],
th[style="text-align:right"] {
  text-align: right !important;
}