Getting Syntax Colouring in HTML using Vim

If you’re wondering how I got the syntax colouring on my CoffeeScript post, here’s the important bits:

  • The VIM :TOhtml command absolutely rocks.  (Thanks to the Vim gurus who pointed me towards it.)
  • The molokai colour scheme is very pretty.
  • The ability to :so! a list of commands in Vi saves a lot of time.

Here’s the commands I use (formatted, of course, using the program itself)

/<body
:s/bgcolor="/background : /
:s/" text="/; color : /
:s/<body /<pre class='code' style="/
:s/"><.*//
A; -moz-background-size: auto auto; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial">^[kdgg
/</body
dGo</pre>^[
:2,-1s/<span.*/span>/<span>/
G:2,-1s/<br>/</span>/

Vim’s colour-coding of keyboard macros leaves something to be desired, but hey, you can’t have everything.  What I do have is something significantly easier to use than the solution I’ve been using for Visual Studio.  There’s a couple of things the Visual Studio solution gets right, like highlighting mutable variables and showing interfaces and classes in different colours, but there’s a lot more manual work involved.

If you are using it, make sure the HTML is the only buffer currently visible.  I’d be very glad to hear from someone who knows how to fix that particular bug.  For non-VIM users, this may look like line noise, but I assure you you’ll be able to read it after a fairly short period of time practicing Vim.  More usefully, you’ll be able to write your own.  One final tip: ^[ is a single character: use CTRL-Q CTRL-[ to get it on Windows.

Technorati Tags: ,,

Published by

Julian Birch

Full time dad, does a bit of coding on the side.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s