DEV Community

Cover image for Writing and Previewing Markdown in Real Time with Vim 8+
Nick Janetakis
Nick Janetakis

Posted on • Originally published at nickjanetakis.com

Writing and Previewing Markdown in Real Time with Vim 8+

*This article was originally posted on April 9th 2019 at: https://nickjanetakis.com/blog/writing-and-previewing-markdown-in-real-time-with-vim-8


I'm about 2 months into using Vim and it's going great. In this video I'd like to cover my general Markdown writing set up with Vim.

Documentation is such an important aspect of being a developer and having a Markdown set up with real time previews really helps writing README files. Especially with the preview being styled up to match GitHub's CSS.

Demo Video Showing How It Works

Timestamped Table of Contents

  • 0:48 -- Going over Markdown related Vim plugins
  • 2:01 -- Limelight and Goyo for distraction free writing
  • 4:20 -- Writing Markdown to see how it all works
  • 5:37 -- Previewing Markdown in a browser
  • 6:52 -- GitHub styled CSS for the preview
  • 8:59 -- Disabling conceal with the vim-markdown plugin
  • 10:18 -- Dealing with code folding on Markdown headers
  • 12:01 -- Adding an image to the Markdown README file
  • 12:48 -- Pushing the example README file to GitHub
  • 13:17 -- Configuring Vim as an editor for git commits

Reference Links

What are some of your Markdown related tips for Vim? Let me know below.

Top comments (4)

Collapse
 
derek profile image
derek

Great Video! Thanks for sharing.

Currently I've been pairing vmd πŸ“Ί with live view with neovim and prettier πŸ’‡πŸΌβ€β™€οΈ for markdown formatting.

Collapse
 
nickjj profile image
Nick Janetakis • Edited

No problem, thanks for watching.

Do you think vmd will work with regular Vim 8+? Also since you've seen my video and are using vmd, do you think vmd offers any improvements? Also what Vim plugin are you using for it? github.com/sencer/vim-vmd?

Collapse
 
derek profile image
derek

I don't think vim-vmd the same "vmd". But that looks like a cool plugin.

Currently the vmd I use isn't a plugin, it's just an electron app. And it reads the README by default.

Speaking of such, it has only dawned on me now... that it'd be a good idea to create a vim function for it; thank you for the inspiration!

I used to use a vim plugin that "looks" similar--it would open a browser, but I found it to be cumbersome. vmd has felt pretty snappy and I've enjoyed it thus far.

I have been using vim-prettier it formats not only js, json, but also markdown. It also just works out of the box, no configuration required. This plugin has greatly improved my workflow.

Collapse
 
andrewbrown profile image
Andrew Brown πŸ‡¨πŸ‡¦

Vim 4 Life