Code Syntax Highlighting for Blogs with VIM

After my recent disappointments with the state of syntax highlighting for code embedded in HTML, I did a little bit of research. I would also like to thank Marc-André Cournoyer for his recommendation.

I found a way to do it with TextMate, or with other blogging plugins. However, I’m not always on my Mac, and I don’t like locking myself into proprietary solutions.

That’s when I remembered that Vim has all you need to turn the code you are seeing into HTML with the exact same colors. If you need to turn a snippet (or the whole file, for that matter) into HTML, just select it and type “:TOhtml”. A new buffer will open with your code wrapped in old-style HTML!

If you are more into CSS and are ready to leave HTML 3.2 behind, you can toggle a flag “:let html_use_css=1″ before running “:TOhtml”. You’ll get semantic CSS like this:

.Statement { color: #ffff00; }
.Constant { color: #ff6060; }
.PreProc { color: #ff40ff; }
.Comment { color: #8080ff; }

There are a couple of things to keep in mind. Vim will use your current color scheme to HTMLize the code. If you’re not satisfied with your current color scheme you can switch with “:colorscheme camo”, for example.

If you want anoter incentive: Vim support 481 syntaxes (!) currently and more are added all the time.

Finally, here’s the shell script I use to automate the process:

#!/bin/sh

gvim +‘colorscheme camo‘ \
     +‘let html_use_css=1‘ \
     +‘runtime! syntax/2html.vim‘ \
     +‘wq‘ \
     +‘q‘ $1

Most of my inspiration came from this article.

---

Possibly related posts: (automatically generated)

• Vim and Color Coding Syntax by file extension
• Ultimate HTML Color HEX Code List
• Learning to Write HTML Color Codes