russross / blackfriday

Blackfriday: a markdown processor for Go
Other
5.43k stars 598 forks source link

Markdown table rendered includes invalid HTML #506

Open Jos512 opened 5 years ago

Jos512 commented 5 years ago

I use Hugo, but was told to make an issue here since Hugo uses Blackfriday.

When I have this Markdown code:

Example | Table
------- | :-----:
Hello | there
this | is
an | example

Blackfriday turns it into the following HTML:

<table>
<thead>
<tr>
<th>Example</th>
<th align="center">Table</th>
</tr>
</thead>

<tbody>
<tr>
<td>Hello</td>
<td align="center">there</td>
</tr>

<tr>
<td>this</td>
<td align="center">is</td>
</tr>

<tr>
<td>an</td>
<td align="center">example</td>
</tr>
</tbody>
</table>

But the official W3C validator considers that to be invalid:

Error : The align attribute on the td element is obsolete. Use CSS instead.

byteporter commented 5 years ago

I submitted a pull request for a fix a few weeks ago:

https://github.com/russross/blackfriday/pull/501

Here are the patch files I use while waiting for the pull to (hopefully) be approved and merged:

html.go.fix-align-tags.patch

diff --git a/html.go b/html.go
index 284c871..ab586fd 100644
--- a/html.go
+++ b/html.go
@@ -786,7 +786,7 @@ func (r *HTMLRenderer) RenderNode(w io.Writer, node *Node, entering bool) WalkSt
        if entering {
            align := cellAlignment(node.Align)
            if align != "" {
-               attrs = append(attrs, fmt.Sprintf(`align="%s"`, align))
+               attrs = append(attrs, fmt.Sprintf(`style="text-align: %s;"`, align))
            }
            if node.Prev == nil {
                r.cr(w)

block_test.go.fix-align-tags.patch

diff --git a/block_test.go b/block_test.go
index 326c311..ecf42d2 100644
--- a/block_test.go
+++ b/block_test.go
@@ -1282,10 +1282,10 @@ func TestTable(t *testing.T) {
            "<tbody>\n<tr>\n<td><em>d</em></td>\n<td><strong>e</strong></td>\n<td>f</td>\n</tr>\n</tbody>\n</table>\n",

        "a|b|c|d\n:--|--:|:-:|---\ne|f|g|h\n",
-       "<table>\n<thead>\n<tr>\n<th align=\"left\">a</th>\n<th align=\"right\">b</th>\n" +
-           "<th align=\"center\">c</th>\n<th>d</th>\n</tr>\n</thead>\n\n" +
-           "<tbody>\n<tr>\n<td align=\"left\">e</td>\n<td align=\"right\">f</td>\n" +
-           "<td align=\"center\">g</td>\n<td>h</td>\n</tr>\n</tbody>\n</table>\n",
+       "<table>\n<thead>\n<tr>\n<th style=\"text-align: left;\">a</th>\n<th style=\"text-align: right;\">b</th>\n" +
+           "<th style=\"text-align: center;\">c</th>\n<th>d</th>\n</tr>\n</thead>\n\n" +
+           "<tbody>\n<tr>\n<td style=\"text-align: left;\">e</td>\n<td style=\"text-align: right;\">f</td>\n" +
+           "<td style=\"text-align: center;\">g</td>\n<td>h</td>\n</tr>\n</tbody>\n</table>\n",

        "a|b|c\n---|---|---\n",
        "<table>\n<thead>\n<tr>\n<th>a</th>\n<th>b</th>\n<th>c</th>\n</tr>\n</thead>\n\n<tbody>\n</tbody>\n</table>\n",

Create text files (I'll assume the above bolded names) and paste the content in. These can be applied using git from the blackfriday directory:

cd $BLACKFRIDAY_ROOT
git apply html.go.fix-align-tags.patch
git apply block_test.go.fix-align-tags.patch