Custom CSS tags for displaying well-formed VBA code

So you might be wondering, what does VBA have to do with a web technology like CSS? If you are like me and you hand-code your website, you might find it difficult to display VBA code properly. Unfortunately, I can't seem to locate a copy of zHTML, and the other VBA-to-HTML converters I tried just don't seem to satisfy.

Since my website is formatted using CSS, I did a bit of digging and found I could create my own HTML tags. I was already using the PRE and TEXTAREA tags to format snippets of VBA code, but this technique allows you to create custom tags that make it simple to roll your own webpages. So I went ahead and wrote some CSS to format the four most commonly posted types of VBA code: Normal, Selection, Comment and Keyword Text. Here it is:

.vba
{ color: #000000;
background: #FFFFFF;
padding: 10px 10px 10px 10px;
font-size: 100%
}
.selected
{ color: #FFFFFF;
background: #330099;
}
.comment
{ color: #339933;
background: #FFFFFF;
}
.keyword
{ color: #330099;
background: #FFFFFF;
}

Paste the above code into the .css file that defines your site's layout. You can fiddle with the background color to make it suit your site better. Now you can wrap your VBA code in tags like this:

Sub fixformulas()
'
' if you have some formulas with a ' or some other
' character in the beginning'
Dim cellAs Excel.Range
For Each cell 
In  Selection
    cell = "=" & Right(cell, Len(cell) - 1)
Next cell
End Sub

And it will display like this:

Sub fixformulas()
'
' if you have some formulas with a ' or some other 
' character in the beginning
'
Dim cell As  Excel.Range
For Each cell In Selection
    cell = "=" & Right(cell, Len(cell) - 1)
Next cell
End Sub

The PRE tag wraps the area in the "vba" tag, which is the default black-on-white text used to display most VBA code (if you haven't fiddled with the default settings in the VBE). So any code that isn't wrapped in a span tag will automatically take on the default color, which is the intuitive way the VBE does it.

Instead of using the deprecated FONT tags or trying to guess the hex values for colors every time you want to use them, you can use friendly words like "keyword" or "comment" in your SPAN tags and the code will be colored accordingly. The PRE tag will also make sure the code is indented properly!

Eventually I'll convert all the existing code to this format, and all future code posted on the blog and the website will be displayed using these custom made CSS class tags.

(ps- the Outlook event code I promised last week is coming up in the next day or two. I was away this week so I have a lot of catching up to do.)

Enjoy,
JP

Related Articles:

• January 30, 2012 -- Remove Flags from Inbox Emails
• January 9, 2012 -- Annoying Website Name Generator in VBA and PHP
• December 26, 2011 -- Validating Userform Data