Code Syntax Highlighting

I have a blog posting on this issue last year. I have really enjoyed to practice those steps to highlight my codes in blog. There are two issues I still don't feel good: first, the HTML codes generated from VIM are not-CSS. The embedded color styles make my blog HTML hard to read and edit. The size of my blog is much bigger even it is not a big deal.

The second issue is that I like change my code background color to black so that it is easy and comfortable for eyes. The white background color is too bright and contrast. It consumes more energy, I think, for the terminal as well. So I think it is time to make change to my code syntax highlighting HTML codes.

Fortunately, I found that VIM has an option for TOhtml command to convert to HTML with CSS classes. The command is very simple:

:let html_use_css=1

The result of TOhtml will be HTML with style css classes defined in header part and all the syntax highlight HTML codes are based on span with class.



The next step is that I have to update my style css classes in my blogger. Two groups of css classes I have to include in my blog header section. It is easy to do since Blogger provides Edit HTML in blog settings. The first group is css classes in my div section as a box for codes. Based on the previous div, I added additional divs with additional background color and text color settings:

...
color: #cccccc;
background-color: #000000;
...

The second group of css files are those generated by VIM in HTML header section. I think VIM use generic css class names for codes. For example, the following are some generated by TOhtml command for Objective-C code:

<style type="text/css">
<!--
.Comment { color: #80a0ff; }
.Statement { color: #fbf204; }
.Special { color: #fb8000; }
.Identifier { color: #40ffff; }
.Type { color: #60ff60; }

For C#, SQL or other languages, the syntax color scheme may be different, but the class names are almost the same. That's the advantage of css.

With above changes, now my codes are and will be in new syntax highlighted colors, and my blog will be much easy to read and maintain.