Writing blog posts in markdown
is fun! However, it would be more convenient if
I could preview the markdown
file as I write it in my text editor, vim
.
There are two ways of approaching this: 1) Preview markdown
in vim
environment itself. OR 2) Preview markdown
in the browser as HTML
. In this
post, we are going to look at both the ways of previewing. So, let’s get
started..
Vim preview
In order to preview the file in vim
we will be using the binary mdv
, a
Python based Markdown previewer. To install this, follow the instructions
in the README.md
here.
NOTE: Don’t forget to “star” the repository, if you use it/like it
Once installed, this command allows us to preview a markdown
file in the
terminal itself:
- File:
# TEST
This is a test file
- Test
- Preview:
$ mdv test.md
TEST
This is a test file
- Test
Now, we can integrate it with vim
. One thing I like to do is always use splits
for previews and other results related to a file. So, we can add this function
to our vimrc
file that opens the output of mdv <current_file>
in a new
split:
function! TerminalPreviewMarkdown()
new % | terminal ! mdv %
endfu
map <silent> <leader>m :call TerminalPreviewMarkdown()<CR>
You can see that I have mapped the function to a key (
Browser Preview
In order to preview markdown
files in browser, we will first convert it to
an html file, and then open it in the browser. To do that, we will use the
ruby gem github-markdown
Once installed, we can use the command:
$ github-markdown test.md > test.html
This will convert test.md
to test.html
which is displayable in the browser.
Now, to tie all this to a vim key we can create a function and bind it to another key:
function! BrowserPreviewMarkdown()
let l:tmpfile = ".some_git_ignored_temp_file_markdown_preview" . ".html"
execute "!" . "rm " . l:tmpfile
echo l:tmpfile
execute "!" . "github-markdown % > " . l:tmpfile
execute "!" . "xdg-open " . l:tmpfile
endfu
map <silent> <leader>p :call BrowserPreviewMarkdown()<CR>
NOTE: xdg-open
works on linux, for mac replace it with just open
This binds the function BrowserPreviewMarkdown
to the key,
Now, hitting