Align GitHub-Flavored Markdown Tables in Vim

Dan Croak

You desire a pretty table in your GitHub document:

Activation funnel

Luckily, GitHub-flavored Markdown enables you to format data as a table:

| Step                | Users  | Conversion | Obstacles            |
| ---                 | ---    | ---        | ---                  |
| Viewed Home Page    | 13,129 | 7.9%       | Messaging            |
| Viewed Sign Up Page | 1,044  | 20.6%      | Cost, credit card    |
| Signed Up           | 215    | 31.2%      | Credit card required |
| Entered Credit Card | 67     | 50.7%      | HTML, deployment     |
| Received Submission | 34     |            |                      |

Over time, you edit this data in your favorite text editor, (Neo)vim. Keeping the Markdown table aligned could be painful, but doesn’t have to be.

Install vim-easy-align with a plugin manager such as vim-plug.

Plug 'junegunn/vim-easy-align'

Set a <Leader><Bslash> mapping in your vimrc:

" Align GitHub-flavored Markdown tables
au FileType markdown vmap <Leader><Bslash> :EasyAlign*<Bar><Enter>

The <Bslash> key is also the | key, a mnemonic when looking at the |s of the table.

Here’s how it looks:

Visual select, leader, backslash

See the documentation for vim-easy-align to see what else you can do!