*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
- Dotfiles: https://github.com/nickjj/dotfiles
- vim-markdown: https://github.com/plasticboy/vim-markdown
- markdown-preview.nvim: https://github.com/iamcco/markdown-preview.nvim
- github-markdown-css: https://github.com/sindresorhus/github-markdown-css
- limelight.vim: https://github.com/junegunn/limelight.vim
- goyo.vim: https://github.com/junegunn/goyo.vim
What are some of your Markdown related tips for Vim? Let me know below.
Top comments (4)
Great Video! Thanks for sharing.
Currently I've been pairing vmd 📺 with live view with neovim and prettier 💇🏼♀️ for markdown formatting.
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?
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.
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 alsomarkdown. It also just works out of the box, no configuration required. This plugin has greatly improved my workflow.Vim 4 Life