redbug312 / markdown-it-multimd-table

Multimarkdown table syntax plugin for markdown-it markdown parser
MIT License
144 stars 37 forks source link

How to add class for table, cell and header? #30

Closed lhf552004 closed 4 years ago

lhf552004 commented 4 years ago

Hi, this plugin is very awesome. Is it possible to add class for table, or cell , header?

redbug312 commented 4 years ago

Other markdown-it plugin appends attributes to HTML elements. I'd recommend markdown-it-decorate for its great simplicity in implementation and flexibility in specifying any element.

For example:

var md = require('markdown-it')({html: true})  // for markdown-it-decorate
            .use(require('markdown-it-multimd-table'))
            .use(require('markdown-it-decorate'));

const exampleTable =
"| Hex <!-- {.th-class } --> |\n" +
"|-----------|\n" +
"| `#A54242` | <!-- {tr: .tr-class } -->\n" +
"| `#8C9440`<!-- {td: .td-class } --> |\n" +
"| `#5F819D`<!-- {.code-class } --> |\n" +
"<!-- {table: .table-class } -->\n" +
"<!-- {thead: .thead-class } -->\n";

console.log(md.render(exampleTable));

generates HTML below

<table class="table-class">
<thead class="thead-class">
<tr>
<th class="th-class">Hex</th>
</tr>
</thead>
<tbody>
<tr class="tr-class">
<td><code>#A54242</code></td>
<td></td>
</tr>
<tr>
<td class="td-class"><code>#8C9440</code></td>
</tr>
<tr>
<td><code class="code-class">#5F819D</code></td>
</tr>
</tbody>
</table>
lhf552004 commented 4 years ago

Thanks. It works