markdig icon indicating copy to clipboard operation
markdig copied to clipboard

Table class attributes not parsing

Open Laim opened this issue 6 months ago • 2 comments

I'm not entirely sure if this is by-design or was never added, so, sorry in advance if it was. First time using Markdig. I'm trying to make a previewer, I use Jekyll and Kramdown for my blog and the below is the existing table layout system I use

This is my Pipeline

var pipeline = new MarkdownPipelineBuilder()
  .UseAdvancedExtensions()
  .UsePipeTables()
  .UseGridTables()
  .UseEmojiAndSmiley()
  .UseAutoIdentifiers()
  .UseYamlFrontMatter()
  .UseTaskLists()
  .UseGenericAttributes()
  .ConfigureNewLine("\n")
  .Build();

This is the table I am trying to output

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Value    | Value    | Value    |
| Value    | Value    | Value    |

As that it works without issue when rendering it in WebView2; but if I add class attributes to it, it doesn't render it at all?

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Value    | Value    | Value    |
| Value    | Value    | Value    |
{:.table .table-bordered .cust-table}

Inputted markdown complete:

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Value    | Value    | Value    |
| Value    | Value    | Value    |
{ .table .table-bordered .cust-table }

![pasted image](https://placehold.co/600x400/EEE/31343C){ .rounded .mx-auto .d-block .img-fluid .w-responsive}

Output:

<p>| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Value    | Value    | Value    |
| Value    | Value    | Value    |</p>
<p><img src="https://placehold.co/600x400/EEE/31343C" class="rounded mx-auto d-block img-fluid w-responsive" alt="pasted image"></p>

*Note having the : after the first curly brace doesn't actually seem to make a difference.

Laim avatar Oct 28 '25 20:10 Laim

I'm an idiot.

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Value    | Value    | Value    |
| Value    | Value    | Value    |
{:.table .table-bordered .cust-table}

Doesn't work, but you know what does work?

{:.table .table-bordered .cust-table}
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Value    | Value    | Value    |
| Value    | Value    | Value    |

🤦

Laim avatar Oct 28 '25 20:10 Laim

It is slightly explained in the GenericAttributesSpecs, but as each spec doesn't reference other specs (e.g. table spec), it might not be completely clear:

Attributes that occur immediately before a block element, on a line by themselves, affect that element

So as you discovered, table attributes can only be put currently before the table, which is internally considered as a paragraph before it is turned into a table.

xoofx avatar Oct 29 '25 10:10 xoofx