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!

We've been helping engineering teams deliver exceptional products for over 20 years. Our designers, developers, and product managers work closely with teams to solve your toughest software challenges through collaborative design and development. Learn more about us.