Open Markdown Previewer Through Vim

March 19, 2021vimmarkdowntip slips

Why?

Imagine you are editing a .md file but you don't know what it will looks after rendered as a markdown. So I dicided to make a command that will open the current file edited in the browser to give a preview of it.

How?

Requirements:

  • Using Chromium based browser (Brave, Chromium, Chrome, etc. - I don't know what others)
  • Install extension Markdown Viewer
  • Make a script in Vim to run it

1. Using Chromium Based Browser

Install it, then go to next step. I am pretty sure this will also works for other browser such firefox (edit: stranger on Reddit says he tried it and it works too eventually).

2. Install Markdown Viewer

  1. Go to this site: Markdown Viewer.
  2. Managed the extension to "Allow access to file URLs": Go to Extension Settings -> Select Setting for Markdown Viewer -> Enable "Allow access to file URLs"

3. Make a Script in Vim to Run .md

Add the below script anywhere desired to add a vimscript either in .vimrc or in after/ftplugin/markdown.vim.

" ----- VARIABLE -----
let $VIMBROWSER='brave'
let $OPENBROWSER='nnoremap <F5> :!'. $VIMBROWSER .' %:p<CR>'


" ----- .md OPENER -----
augroup OpenMdFile
  autocmd!
  autocmd BufEnter *.md echom "Press F5 to Open .md File"
  " Trying to make a keybind to open brave from here
  autocmd BufEnter *.md exe $OPENBROWSER
augroup END

you can change the $VIMBROWSER to any browser you use in this case I am using Brave Browser.

Now if you open any *.md file it will print a message "Press F5 to Open .md File" and if you press F5 it will open like so.

Image Makrdown Previewer and Vim