Writing and Previewing Markdown in Real Time with Vim 8+
Here's a short video going over my workflow for writing Markdown documents with Vim. The preview is styled using GitHub's CSS.
Quick Jump:
I’m about 2 months intousing Vim and it’sgoing great. In this video I’d like to cover my general Markdown writing set upwith Vim.
Documentation is such an important aspect of being a developer and having aMarkdown 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.
Never Miss a Tip, Trick or Tutorial
Like you, I'm super protective of my inbox,so don't worry about getting spammed. You can expect a few emails per year (at most), andyou can 1-click unsubscribe at any time.See what else you'll get too.