markdown-it-scrolltable

A markdown-it plugin to wrap any <table> into a <div> for horizontal scrolling on narrow screens.

Examples #

Column | Column
------ | ------
Cell | Cell

will become

<div class="scroll-table" style="overflow-x:auto">
<table>
<thead>
<tr>
<th>Column</th>
<th>Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>

html inside of your markdown, like for example

<table>
<thead>
<tr>
<th>Column</th>
<th>Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>

will be transformed into

<div class="scroll-table" style="overflow-x:auto">
<table>
<thead>
<tr>
<th>Column</th>
<th>Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>

Install #

npm i markdown-it-scrolltable

Usage #

var markdownIt = require('markdown-it');
var markdownItScrollTable = require('markdown-it-scrolltable');

markdownIt({
html: true
})
.use(markdownItScrollTable);