Johann Philipp Strathausen

maker of dracula.js co-founder of FitAnalytics

June 16th, 2012

Vim highlight your blogs

Some weeks ago, I wrote a javascript module using vim to transform source code into highlight HTML and CSS, after having stumbled upon vim2html. I am announcing my latest code snippet that uses vim to turn your source code into HTML and CSS, for your web project!


Vim has excellent highlighting support for a variety of programming languages, and probably one of the most complete in the universes. Could one use it in a blog or something? There are already tools taking advantage of this out there.

The pros

  1. You get all kinds of languages highlighted for free - sure vim has a higher coverage than your favourite highlighting library.
  2. You get nice colours coresponding to those you use in the terminal and feel at home on your blog.

The cons

  1. Wow, vim's default highlighting of JavaScript sucks! Funny that I only notice it now.
  2. Getting stdin/stdout to work with vim was not easy and straight-forward. I ended up using temporary files instead. Shame.
  3. Start-up is damn slow. It can take up to one or even to three seconds, depending on how many plugins you have installed. Twenty articles with two code blocks each can mean a few minutes of waiting, just to compile them to HTML. I didn't manage to use the same vim instance for all the files.
  4. The generated HTML sucks! It's like from the nineties: a complete HTML file with embedded styles in the header. I'm parsing it with regular expressions... Even worse, I had to activate CSS and XHTML - by default, you'd get fracking FONT tags!!


Still convinced?

  1. Install it via npm, e.g.

    npm install vimify -S
  2. Use it your code.

    var vimify = require('vimify');
          vimify('x = (y) -> y', 'coffee', function(err, style, html) {
           console.log('the css', style);
           console.log('the markup', html);


One more reason to use vim.