Preview Markdown files

Markdown is a format well-suited for editing in Vim. It’s text-based and the syntax has semantic meaning imparted by it, making it easy to read and parse even in its raw, text-only format. It’s a popular choice for note-taking, README files, software documentation, and much more. Sometimes it would help to get a look at how the Markdown will be rendered in a browser.

There are a few options for previewing Markdown edited in Vim. My favorite is livedown.vim, a plugin that connects Vim to Livedown, an NPM-based local web server with auto reload that renders Markdown. Another popular one is Vim Markdown Preview. In this tip, I’ll show you how to install and configure Livedown.

First, you’ll need to install the server itself:

$ npm install -g livedown

Then, install the plugin. You can use any plugin manager, but I use Vim-Plug:

Plug 'shime/vim-livedown'

While you’re in there, you might want to add a mapping. To launch your browser with the current Markdown document previewed, you simply run :LivedownPreview but you might prefer the suggested mapping of gm (mnemonic “go markdown”):

nmap gm :LivedownToggle<CR>

After you’ve installed the plugin and the mapping, it’s as simple as pressing gm and your browser will automatically launch. I like to split my screen with Vim on the left and the preview browser on the right. Whenever I write the file with :w in Vim, the preview pane will instantly update. Watch the video below to see this in action.