markdown-it-merge-cells-plus

A markdown-it plugin to merge table cells on demand with explicit markers.

By default cells are not merged. Put < or ^ in a cell to merge it manually:

• < — merge this cell into the cell on its left (horizontal / colspan)
• ^ — merge this cell into the cell above (vertical / rowspan)

This follows the convention used by MultiMarkdown / PHP Markdown Extra table extensions.

The header row may only merge left/right with <; it can never be merged up/down. Consequently ^ only takes effect from the second body row (row 2) on — the first body row sits right under the header and must not fold into it.

Install

npm install markdown-it-merge-cells-plus

Usage

// Node.js
let MarkdownIt = require('markdown-it'),
    MarkdownItMergeCells = require('markdown-it-merge-cells-plus'),
    md = new MarkdownIt();
md.use(MarkdownItMergeCells);

// Browser: bundle it with your bundler of choice (webpack, Rollup, esbuild, ...),
// or load markdown-it and this plugin as ES modules from a CDN:
import markdownit from 'https://cdn.jsdelivr.net/npm/markdown-it/+esm';
import mergeCells from 'https://cdn.jsdelivr.net/npm/markdown-it-merge-cells-plus/+esm';
const md = markdownit().use(mergeCells);

let result = md.render(`
| Region | <   | Q1   |
|--------|-----|------|
| North  | <   | 100  |
| ^      | <   | 200  |
| South  | <   | 300  |
`)

The result is:

<table>
  <thead>
    <tr>
      <th colspan="2">Region</th>
      <th>Q1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2" colspan="2">North</td>
      <td>100</td>
    </tr>
    <tr>
      <td>200</td>
    </tr>
    <tr>
      <td colspan="2">South</td>
      <td>300</td>
    </tr>
  </tbody>
</table>

Rendered:

Rules

• A cell whose trimmed content is exactly < (not in the first column) merges into the cell on its left.
• A cell whose trimmed content is exactly ^ (from row 2 on) merges into the cell above.
• Any other content is left alone — identical neighbours are not merged.
• < in the first column and ^ in the header / first body row are no-ops: they render as literal < / ^ text rather than triggering a merge.
• Markers chain naturally, so a </^ region must form a rectangle (HTML tables cannot represent irregular shapes).

Notice

It's done by wrap markdown-it's table parser and modify the generated tokens (which will be rendered to HTML). If in later versions markdown-it change the tokens' generated by table parser, this plugin may not able to work anymore.

File an issue if you find this plugin can't work with the latest version of markdown-it.

Test

node test/test.js      # runs assertions and writes test/output.html

test/output.html shows every case as markdown source beside its rendered table for a side-by-side comparison.

License

MIT

Acknowledgements

This plugin is a fork of markdown-it-merge-cells by Menci, published under the MIT License. The merge behaviour was changed from "auto-merge identical neighbours" to explicit < / ^ markers (MultiMarkdown / PHP Markdown Extra convention).