Vim Essential Plugin: Markdown to HTML

Vim Essential Plugin: Markdown to HTML

on Apr 5th 2011 with 23 comments
Tutorial Details
This entry is part 5 of 8 in the Vim Essential Plugins Session
« PreviousNext »

We’re cheating a bit in this episode. Rather than installing an actual plugin, we’ll be using a couple tools to allow us to write and convert Markdown to HTML. It’s really a simple process, and can save great deals of time.

Usage

First, we need to download Markdown and place it within our runtime folder. On the Mac, you can drag the Markdown.pl file into your usr/local/bin/ folder. And that’s it; you’re all set! Next, to trigger the markdown-to-html conversion, we need to provide two parameters: the path to the Markdown.pl file, and the command itself.

Within Vim, the following should do the trick:

:%! /usr/local/bin/Markdown.pl --html4tags

This instructs the Markdown.pl file to run on the curent page. But, that’s a little too much typing; let’s instead save this to our .vimrc file, and assign it to a shortcut.

".vimrc file

"Markdown to HTML
nmap md :%!/usr/local/bin/Markdown.pl --html4tags

With this line of code, whenever we type – by default – backslash + md, that command will run, thus converting our markdown to clean HTML.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Huckleberry

    I don’t get the point. If I still have to type in, and learn, obscure markup like this:

    Header 1
    =======

    To signify the tag, wouldn’t my time be better spent just learning HTML?
    Sounds like going east to get west to me.
    Though I haven’t tried it, just sayin’
    Huck

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      It’s not a matter of not learning HTML. But it’s a quicker to write Markdown, when the option is available.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      P.S. To create a H1 tag, it’s quicker to do # My Heading 1

    • http://designslicer.com Kien

      Markdown and many other markups of this type are not mean to replace HTML. Also, you should read beyond just the first basic syntax page of Markdown before forming your opinion on it. If you’d read further you would know that that format ### Header 3 works for H1-H6 as well.

      Anyway, the series is named “Vim Essential Plugin” so I kind of hoped this was a pure Vimscript Markdown to HTML plugin. Since I’m on Windows and can’t run Perl natively.

  • http://think256.com/ Eli Gundry

    Over the weekend, I re-installed Vim and started using Tim Pope’s Pathogen to manage my plugins/scripts. It made my $VIMRUNTIME much cleaner and more organized. Now, if I want to remove a plugin, I only have to delete a folder rather than remove the plugin one file at a time.

    I think you’d really like it, Jeffery.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Definitely. We’re covering it in a future episode in this session.

  • http://iMotivate.net Netguy

    Is this for MAC only or It works with Windows too ?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      It’ll work for both.

  • Moses

    I never realized this until now: StackOverflow uses ‘Markdown to HTML’ for formatting posts. I’ve been learning Markdown syntax for a year now and I haven’t even realized it XD. This plugin will definitely be added to my vim workflow.

  • http://www.modernooze.com sam – dorset web design

    I have never realised the sparkey boy plugin because i always liked that about notepad ++ and never got that feature back until now! Thanks chap

  • http://www.umarjadoon.com Umar

    You should cover the UltiSnip plugin as well for Vim, I think it’s way better than Snipmate.

    • http://www.umarjadoon.com Umar

      *UltiSnips (typo)

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks – will check it out.

  • Cesar Tessarin

    Jeffrey,

    If you installed the script in /usr/local/bin/, you don’t need to write the complete path in the shell. This directory should be included in your PATH.

    If you want to confirm that, type echo $PATH in the terminal — the paths are separated with colons. One of them should be /usr/local/bin/. It can be hard to read the list, so a bit of piping may be a good idea: echo $PATH | tr ‘:’ ‘\n’

    Personally, I’d install it in another place. Mine is under /opt/ (looks like it fits better here). Anyway, leave it there. You can just rename it to markdown simply, to get a more “Unix utility” feel. And while you are in the terminal, add a line to your .profile (or .bash_profile or whatever configuration file you use) saying alias md=markdown, unless you use the md utility (is there someone who uses it? :P ).

    • Cesar Tessarin

      Nice, I’ve lost all the <pre> formatting. Here are the fixes:

      01| /usr/local/bin/
      02| PATH
      03| echo $PATH
      04| /usr/local/bin/
      05| echo $PATH | tr ':' '\n'
      06| /opt/
      09| alias md=markdown

      Now I know everything should be included in <code> (like I did in some of them), and not <pre> as the footer says.

  • Thomas Bennett

    Far better / easier to set up a surround plugin or set up short cuts like ,jsr to spit out SCRIPT tags with a doc ready and place you into insert mode. or type and have the closing tag appear around you.

    Good tutorial, but I don’t find it practical

  • http://designslicer.com Kien

    This is one of those times that I want to make the switch to MacOS. Everything just works right off the bat.

    • Markus

      ..or for example Ubuntu Linux. “Just works” :)

      I shiver when I look back to my times developing on Windows, with all the problems. And when getting into an error, not getting a proper error message etc. :)

  • http://www.benedikt-wolters.de MightyUhu

    I think the Blog software messed up the .vimrc code snippet. I use to write my Blog Posts in Plain HTML this will be very useful!

    It would be nice to have this kind of thing for LaTex.

  • http://www.royalkicker.com Hyde

    You should check the Markdown syntax page … http://daringfireball.net/projects/markdown/syntax

    I don’t know if some of you are using GNU/Linux but basically you have a package that allow you to run a command like this one (I havent tested it on a Macbook since I have a Debian GNU/Linux on it) :

    $ markdown file.mkd > file.html

    I’m using mardown and vim since a while and it saves you a lot of time :)
    On top of that, some CMS like Drupal have plugin to handle mardown syntax too …

  • Gary Cheeseman

    Great tutorial, thanks.

    I have also added the following to my ~/vimrc file:

    “Select using visual first, then \mm will convert the selected markdown to html
    vmap mm :!/usr/local/bin/Markdown.pl –html4tags

  • http://suanaikyeo.com suan

    If you want to preview your Markdown in real-time from vim, check out this plugin: https://github.com/suan/vim-instant-markdown

    (Disclaimer: I’m the author =) )

  • http://www.gundya.com Ruth

    I was suggested this web site by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my difficulty.
    You’re wonderful! Thanks!