---
title: Align GitHub-Flavored Markdown Tables in Vim
teaser: 'GitHub lets you create pretty tables in Markdown. Keeping those tables pretty
  in the source code doesn''t have to be painful.

  '
tags: vim,productivity
author: Dan Croak
published_on: 2016-06-15
---

You desire a pretty table in your GitHub document:

![Activation funnel](https://images.thoughtbot.com/blog-vellum-image-uploads/0UQhtp2VQcOTClHCr5bY_activation-funnel-table.png)

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

[gh]: https://help.github.com/articles/organizing-information-with-tables/

    | 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][neo].
Keeping the Markdown table aligned could be painful,
but doesn't have to be.

[neo]: https://neovim.io/

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

[vim-easy-align]: https://github.com/junegunn/vim-easy-align
[vim-plug]: https://github.com/junegunn/vim-plug

```vim
Plug 'junegunn/vim-easy-align'
```

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

```vim
" 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](https://images.thoughtbot.com/blog-vellum-image-uploads/37NTLDaRKW3msnk4QmcA_align-markdown-table-in-vim.gif)

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