Remark-extended-table NPM

remark-extended-table

remark plugin to support table syntax allowing colspan / rowspan

Feature

support extended table syntax of markdown-preview-enhanced which allows colspan / rowspan cells
built on top of remark-gfm and micromark-extension-gfm-table

Warning

This package overrides remarkGfm behaviors. If you encounter any problems, disable this first and see what will happen.

Extended Table Syntax

With extended table syntax, you can write table cell with colspan / rowspan using the following special cells.

cell containing only > (to be merged with the right cell)
cell containing only ^ (to be merged with the upper cell)

| header1          | header2          |
| ---------------- | ---------------- |
| cell (rowspan=2) | cell             |
| ^                | cell             |
| >                | cell (colspan=2) |
| escape >         | \>               |
| escape ^         | \^               |

If set colspanWithEmptyCell option, you can use empty cell containing no spaces which merges with the left cell. For the purpose of avoiding unintentional merges, the followings are not merged.

Cell containing whitespaces
Cell without ending divider (|)

| header1     | header2 |
| ----------- | ------- |
| cell (rowspan=2)     ||
| normal cell |         |
| normal cell |

Install

$ npm install remark-extended-table

Use

import { remarkExtendedTable, extendedTableHandlers } from 'remark-extended-table';

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';
import remarkGfm from 'remark-gfm';

const md = `
| a | b |
|---|---|
| 1 | 2 |
| ^ | 3 |
`;

const process = (md: string) =>
  unified()
    .use(remarkParse)
    .use(remarkGfm)
    .use(remarkExtendedTable)
    .use(remarkRehype, {
      handlers: {
        // any other handlers
        ...extendedTableHandlers,
      }
    })
    .use(rehypeStringify)
    .process(md);

API

`unified().use(remarkExtendedTable[, options])`

Configures remark to parse extended table syntax.

This MUST be applied after remarkGfm.

`options`

`tablePipeAlign` (`boolean?`, default: `true`)

Passed to mdast-util-gfm-table (used in remarkGfm) as tablePipeAlign option.

MUST be set to the same value as remarkGfm.

const result = await unified()
  .use(remarkParse)
  .use(remarkGfm, { tablePipeAlign: false })
  .use(remarkExtendedTable, { tablePipeAlign: false })
  .use(remarkStringify)
  .process(md);